美文网首页
图解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原型链继承关系

    最终的绘制图 1、以Array对象为例 揭示__proto__、prototype、constructor三者关系...

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • 原型链以及继承

    原型链 原型链类似关系链,几乎所有的js对象都会有通过原型链prototype继承过来的方法或者属性,在java和...

  • js继承

    js继承js 继承-简书 原型链实现集继承 上面的代码实现原型链继承最重要的son.prototype=new f...

  • js实现继承的几种方式

    js实现继承有几种方式,这里我们主要探讨 原型链继承 构造继承 组合继承(原型链和构造继承组合到一块,使用原型链实...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • 浅析JS继承方法

    JS 实现继承的方法有:1.原型链继承2.构造函数继承3.组合继承(原型链继承 + 构造函数继承)4.原型式继承(...

  • JS汇总---面向对象&数组

    面向对象 js原型链的继承 静态属性怎么继承 js原型链以及特点 面向对象有哪几个特点 封装,继承,多态 对象的继...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • 面向对象-继续

    原型链图解 上代码: Object 创建基本包装类型的对象 js中所有的对象都基于object,都继承自objec...

网友评论

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

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