图解原型和原型链

每一个 js 对象都有一个 proto 属性,这个属性指向了 原型 ,这个属性在现在来说已经不建议直接使用了,这是浏览器在早期为了让我们访问到内部属性 [[prototype]] 来实现的一个东西.

讲到这里好像还是没明白什么是原型,接下来我们根据图来看看 proto 都有些啥:

.

结论: obj.__proto__.constructor === Object .

原型的 constructor 属性指向了构造函数

中看到的一样.

得出结论:

• 对象的 __proto__ 属性指向了 原型 ;
• 原型 的 constructor 属性又指向了 构造函数 ;
• 构造函数 又通过它的 prototype 属性指回了 原型 ;

::: warning 并不是所有函数都具有 constructor 属性,如: Function.prototype.bind() :::

其实,原型就这么简单.

原型链

接下来我们根据下面这张图来看看 原型 和 原型链 等关系,彻底搞明白它.

看完这张图,接下来我们就来解释下什么是 原型链 吧. 其实, 原型链 就是多个对象通过 __proto__ 属性的方式链接了起来. 为什么 obj 对象可以访问到 valueOf 函数,因为 obj 通过原型链找到了 valueOf 函数.

看图梳理下:

• __proto__ ：是 对象 就会有这个属性(强调是对象); 函数 也是对象,那么函数也有这个属性咯,它指向 构造函数 的原型对象；

• prototype ：是 函数 都会有这个属性(强调是函数)， 普通对象 是没有这个属性的（JS 里面，一切皆为对象，所以这里的 普通对象 不包括 函数对象 ）.它是构造函数的原型对象；

• constructor ：这是 原型对象 上的一个指向 构造函数 的属性。

总结:

• 每一个对象都有 __proto__ 属性, __proto__ ==> Object.prototype (Object 构造函数的原型对象);
• 每个函数都 __proto__ 和 prototype 属性;
• 每个 原型对象 都有 constructor 和 __proto__ 属性,其中 constructor 指回'构造函数', 而 __proto__ 指向 Object.prototype ;
• object 是有对象的祖先,所有对象都可以通过 __proto__ 属性找到它;
• Function 是所有函数的祖先,所有函数都可以通过 __proto__ 属性找到它;
• 每个函数都有一个 prototype ,由于 prototype 是一个对象,指向了构造函数的原型对象
• 对象的 __proto__ 属性指向 原型 , __proto__ 将对象和原型链接起来组成了原型链