JS原型及原型链没有那么难

242 阅读2分钟

一、概念对象说明

1、function 【函数对象】通过Function构造函数创建的都是function

2、object 【实例对象】通过new创建的都是object

3、prototype 【原型对象】,每个【函数】都有,也只有函数才有。既然是对象,那下面肯定会有属性,有一个默认属性【constructor】构造函数指针。

4、proto 【原型指针】每个对象都有,每个对象都有,每个对象都有。 包括prototype原型对象也有一个__proto__指针。

5、constructor 【构造函数指针】每个函数都有一个构造函数。 构造函数,比如:

function Person() {} //函数声明

Person // 就是构造函数,其实就是执行一次函数

二、原型链

多个【对象object】通过指针【proto】连接起来形成的一条链,就叫【原型链】。链接如下图:

xiaohuang.png

每个对象都有一个【proto】原型指针,指向链上的上一个对象的原型对象【prototype】,原型对象【prototype】上的原型指针【proto】又指向上上一个对象的原型对象【prototype】,最终会到native code顶端Object.prototype = null;

三、构造函数 & 实例 & 原型对象 三者关系

Pereoe prototype.webp

四、new & object.create & {} 区别?

1、new创建的实例对象,实例对象会浅复制一次构造函数的属性。原型指针【proto】指向构造函数的【prototype】原型对象,可以访问/修改【原型对象】上的属性。

2、Object.create 创建一个新对象,默认新对象是【没有属性】的,除非指定了第二个参数,第二个参数就是指定属性的。然后新的对象原型指针【proto】指向传入的对象实例。

3、字面量 {} 创建对象,实际上是创建一个指向native code的 object 实例,等价于 new Object();

参考文献:

1、www.jianshu.com/p/dee9f8b14… 最详尽的 JS 原型与原型链终极详解,没有「可能是」

2、zhuanlan.zhihu.com/p/22787302