图解JS原型链继承关系

2020-01-04  本文已影响0人  David_Rao

最终的绘制图

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构造函数产生

上一篇下一篇

猜你喜欢

热点阅读