美文网首页
JavaScript原型链(死亡缠绕)

JavaScript原型链(死亡缠绕)

作者: 前端开发工程师老唐 | 来源:发表于2018-12-29 10:34 被阅读0次

JavaScript的原型链一直是个我搞不懂的东西。包括我在写文章和画关系图的时候。
不知道是什么历史原因让js产生了如此复杂的继承关系。
记得以前玩游戏,有个技能叫:死亡缠绕。来形容这个很贴切。
直接上图,有问题欢迎指正!

js原型链.png

画图是明确问题的很好方式,画了一遍图之后,清晰了不少。

总结点规律:

  • 所有对象都在原型链上
  • 除了null 每个对象都有且唯一的proto原型对象,即仅有一条原型链
  • 只能访问原型链上的方法和属性
  • f 由F new操作而来,看似他们关系很密切 ,其实f和F的原型链半毛钱关系没有,即F原型链上的方法属性f均不能访问。

new操作符到底做了什么?

以如下new操作为例:

function F(name) {
    this.name = name;
}
const f = new F("test")
  • 创建一个新对象
let instance = new Object();
  • 创建instance原型链
instance.__proto__ = F.prototype;
  • 在instance中执行F函数体
F.call(instance)
  • 判断执行结果类型,如果为基础数据类型(undefined, null, number, string, Boolean)则返回instance,反之,则返回该对象

自己手动实现一个 newFunc:

function newFunc(func){
    var instance = new Object();
    if (func.prototype !== null) {
        instance.__proto__ = func.prototype;
    }
    var result = func.apply(instance);
    if ((typeof result === "object" || typeof result === "function") && result !== null)               
    {
        return result;
    }
    return instance;
}
//测试
function F(){
    this.a = "hahah"
}
let f = newFunc(F);//F {a: "hahah"}

关于最后一条可能不好理解,上几个例子:

    function Person1(name) {
        this.name = name;
    }
    function Person2(name) {
        this.name = name;
        return this.name;
    }
    function Person3(name) {
        this.name = name;
        return new Array();
    }
    function Person4(name) {
        this.name = name;
        return "hahah";
    }
    function Person5(name) {
        this.name = name;
        return function() {};
    }
    function Person6(name) {
        this.name = name;
        return String(1);
    }
    var person1 = new Person1('person1');  // 函数无返回,默认返回undefined{name: 'person1'}
    var person2 = new Person2('person2');  // {name: 'person2'}
    var person3 = new Person3('person3');  // []
    var person4 = new Person4('person4');  // 'person4'
    var person5 = new Person5('person5');  // function() {}
    var person6 = new Person6('person6');  // name: "person6"

相关文章

  • JavaScript原型链(死亡缠绕)

    JavaScript的原型链一直是个我搞不懂的东西。包括我在写文章和画关系图的时候。不知道是什么历史原因让js产生...

  • 【javascript】继承

    javascript只支持实现继承,而且继承主要是依靠原型链来实现的。 原型链 javascript将原型链作为实...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • javaScript原型链

    javaScript原型链概念JavaScript之继承(原型链)数据结构var Person = functio...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • javascript碎片知识001

    javascript中的对象(原型,原型链) 什么是原型? 原型是JavaScript中的继承的基础,JavaSc...

  • 面试题 Javascript

    介绍JavaScript的基本数据类型。 说说写JavaScript的基本规范? JavaScript原型,原型链...

  • JavaScript 基础知识点

    介绍JavaScript的基本数据类型。 说说写JavaScript的基本规范? JavaScript原型,原型链...

  • 原型和原型链篇

    原型和原型链 1.理解原型设计模式以及JavaScript中的原型规则 原型设计模式JavaScript是一种基于...

网友评论

      本文标题:JavaScript原型链(死亡缠绕)

      本文链接:https://www.haomeiwen.com/subject/plfelqtx.html