美文网首页
图解JS原型链继承关系

图解JS原型链继承关系

作者: David_Rao | 来源:发表于2020-01-04 17:12 被阅读0次

    最终的绘制图

    1、以Array对象为例

    揭示__proto__、prototype、constructor三者关系

    验证代码

    <script>
        var arr = new Array(1, 2, 3);  // 通过Array构造函数实例化出一个arr对象
        console.log(Array.prototype);  // Array原型对象
        console.log(arr.__proto__);  // Array原型对象
        console.log(Array.prototype.constructor.name);  // Array构造函数
    </script>
    

    2、Array构造函数由Function构造函数实例化

    验证代码

    <script>
        var arr = new Array(1, 2, 3);
        console.log(Array.__proto__);  // Function原型对象
        console.log(Array.__proto__.constructor.name);  // Function构造函数
    </script>
    

    3、所有构造函数对象本质都由Function构造函数实例化产生

    包括Function构造函数本身

    验证代码

    <script>
        console.log(Function.__proto__);  // Function原型对象
        console.log(Function.__proto__.constructor.name);  // Function构造函数
    </script>
    

    4、Object原型对象以上已经不存在原型对象


    验证代码

    <script>
        console.log(Function.prototype.__proto__);  // Object原型对象
        console.log(Function.prototype.__proto__.constructor.name);  // Object构造函数
        console.log(Object.prototype.__proto__);  // null
    </script>
    

    5、再次验证所有构造函数本质都由Function构造函数实例化产生


    验证代码

    <script>
        console.log(Object.__proto__.constructor.name);  // Function构造函数
    </script>
    

    6、Object构造函数对象的原型对象是function原型对象

    <script>
        console.log(Object.__proto__);  // Function原型对象
    </script>
    

    7、所有原型对象根本都是由Object构造函数产生


    验证代码

    <script>
        console.log(Array.prototype.__proto__);  // Object原型对象
        console.log(Array.prototype.__proto__.constructor.name);  // Object构造函数
    </script>
    

    最后:
    所有原型对象根本都是由Object构造函数产生
    所有构造函数根本都是由Function构造函数产生

    相关文章

      网友评论

          本文标题:图解JS原型链继承关系

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