三分钟讲清楚---- __proto__、prototype、原型链

212 阅读1分钟

先不上概念,用例子说话

const a = new Array();

a.__proto__ = ?
a.constructor =?

  这答案很明显 Array.prototypeArray 嘛?

  • a.__proto__Array.prototype 是一个东西,prototype 为构造函数独有;
  • Array 是个函数,蓝色虚线 就是Array 做的事情,是原型链的一部分;

一句话:构造函数的作用,就是将自身的原型(prototype),赋值给实例的 __proto__;

image.png

如果抽象一些,在看看

function A (name) {
  this.name = name;
};

var a = new A('smart a'); ??

console.log(a.__proto__ === A.prototype); ??
console.log(A.__proto__ === Function.prototype); ??
console.log(Function.__proto__ === Function.prototype); ??
console.log(Function.prototype.__proto__ === Object.prototype); ??

输出是什么?

console.log(a.__proto__ === A.prototype); // true
console.log(A.__proto__ === Function.prototype); // true

前两个好理解

第一个:因为实例(a)函数A 构造,自然第一个true
第二个:函数A 也是被构造出来的,被谁?被 Function 这个构造的,自然第二个好解释

第三个是怎么回事?自己等于自己?

console.log(Function.__proto__ === Function.prototype); // true

这里因为Function 是一种特殊的函数,就如同Array 一样,他也是由 构造函数 构造产生的,构造函数也是函数,所以才会出现这个现象;

那么一直继续下去,尽头在哪里?

console.log(Function.prototype.__proto__ === Object.prototype); ??
console.log(Object.prototype.__proto__ === null); ?? 

因为在 JS 中万物皆对象,那么Function.prototypeObject这个构造函数构造出来,基于我们之前的一个规律,Function.protytype.__proto__ 是等价于 Object.prototype的;

console.log(Object.prototype.__proto__ === null); // true

那么最后,Object.prototype.__proto__,根据规律,其构造函数的prototype,但是,这里就是原型联的终点null,这里不为什么,这就是规范

这个一直可以向上寻找的过程,也即是原型链

结论

一个变量的 __proto__,永远是指向其构造函数原型(prototype),其终点为null
并且这种通过 prototype 一直寻找的过程,也即是原型链

image.png