美文网首页
js的完整原型链示意图

js的完整原型链示意图

作者: zzglovecoding | 来源:发表于2020-07-08 22:04 被阅读0次
原型链示意图.png
1.内置构造函数的prototype都指向自己的prototype,然后再proto指向了Object.prototype
2.Object.create(a)的作用是:如果a是函数,那么作用就是内部新的构造函数的prototype(新对象的proto)指向这个a,如果a是一个对象,那么就是内部新的构造函数(新对象的proto)指向这个a对象

总结:无论是自定义的构造函数还是内置的构造函数,他们的prototype都指向了一个新的对象,这个对象就叫构造函数.prototype,这个东西就是一个实例对象,他的proto全都会指向Object.prototype,可以看做,你们这些构造函数的原型,全部都继承了Object.prototype,然后这个Object.prototype对象的proto是指向null的,他的constructor就是指向Object了。(不光是上面图中提到的那些Array之类的,String也是一样,尤其注意proto是双下划綫,String.prototype.proto === Object.prototype)
也就是说,所有的对象最后都proto继承自Object.prototype
另外,构造函数无论是自定义的还是内置的,他都有prototype和proto两个属性,prototype当然指向自己的原型,就是一个对象,但是proto都是指向的Function.prototype的,因为他们都是Function的实例对象

3.借用该原型链图讲一下new指令的自定义
new指令发生了四个事情
a.先创建一个空对象
b.将空对象的原型指向构造函数的prototype
c.将this指向新创建的对象
d.执行构造函数的代码,然后返回新对象

function Foo(name,age) {
    this.name = name;
    this.age = age;
}

//myNewObj是用create方法,加apply自己模拟出来的
let myNewObj = Object.create(Foo.prototype);
Foo.apply(myNewObj,['张三',24])

//newObj是直接用new指令直接弄出来的
let newObj = new Foo('张三',24)
//相当于设置了newObj.__proto__ = constructor.prototype

上面代码中newObj是直接new出来的,myNewObj是自己做出来的,Object.create的作用就是完成a和b两步,apply完成的是c和d两步。
为什么要设置Object.create(Foo.prototype)呢?
答:create的作用是在内部创建一个构造函数,构造函数的prototype是指向了传入对象的,你希望构建出来的实例对象的proto属性指向谁,就需要把参数设置为谁,这里明显想要模拟这个对象是Foo创建出来的(new出来的),所以当然是Foo.prototype,如果是Foo的话,那创建出来的对象的proto就是指向了Foo,那他就是指向Foo的那个create内部构造函数创建出来的了,这样就不能起到模拟是Foo新建出来的目的。

相关文章

  • js的完整原型链示意图

    1.内置构造函数的prototype都指向自己的prototype,然后再 指向了Object.prototype...

  • JavaScript原形链继承、__proto__、protot

    原型链示意图

  • 原型链实现继承

    原型链 原型链示意图 使用原型链实现继承 这是怎么回事呢? 原型链在哪? 听我细细道来~ 首先 Teacher 实...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • js原型链总结示意图

    s1 s2 Student之间的关系见下图 可以推导出如下的关系: 任何一个函数的prototype都有2个属性:...

  • 第六章(3):继承

    继承的几种方式 原型链 原型链示意图: 构造函数 组合继承(将原型链和构造函数组合在一起) 原型式继承 寄生式组合...

  • JS的__proto__和prototype

    最近在回顾JS的原型和原型链的知识,熟悉JS的同学都知道JS的继承是靠原型链实现的,那跟原型链相关的属性__pro...

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

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

  • 从实现角度分析js原型链

    从实现角度分析js原型链 欢迎来我的博客阅读:《从实现角度分析js原型链》 网上介绍原型链的优质文章已经有很多了,...

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

网友评论

      本文标题:js的完整原型链示意图

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