JS 显示原型、隐式原型与原型链 / 构造函数、实例、实例原型之间的关系

什么是原型链

原型链是利用原型，让一个引用类型继承另一个 引用类型的属性和方法。

为了说明白原型链，需要从构造函数、原型与实例的关系讲起。

构造函数、原型与实例的关系：

• 每个构造函数都有一个原型对象，
• 原型对象都包含一个指向构造函数的指针（显式原型），
• 而实例都包含一个指向原型对象的内部指针（隐式原型）。

那么，假如让原型对象等于另一个类型的实例，结果会让此事的原型对象包含一个指向另一个原型的指针，相应地，另一个原型中也包含着指向另一个构造函数的指针。

假如另一个原型又是另一个类型的实例，那么上述关系依然成立。

如此层层递进，就构成了实例与原型的链条。

这就是原型链的基本概念。

JavaScript 只是在对象之间创建关联，所以两个对象之间的关系并不是复制而是委托。

所以，相比之下，说委托比继承更合适。

显式原型:

• 每一个函数在创建之后都会拥有一个名为 prototype 的属性，这个属性指向函数的原型对象。

隐式原型:

• JavaScript 中任意对象都有一个内置属性 [[prototype]]
• 在ES5之前没有标准的方法访问这个内置属性，但是大多数浏览器都支持通过 __proto__ 来访问。
• ES5 中有了对于这个内置属性标准的 Get 方法 Object.getPrototypeOf()
• Object.prototype这个对象是个例外，它的proto值为null

图片描述

代码描述

function Person() {}
person = new Person();

console.log(person.__proto__ === Person.prototype);
console.log(Object.getPrototypeOf(person) === Person.prototype);
console.log(person.constructor === Person); // 注①
console.log(Person.prototype.__proto__ === Object.prototype); //注②
console.log(Object.prototype.__proto__ === null);
console.log(Person.prototype.constructor === Person);
console.log(Object.__proto__ === Function.prototype); //注③
console.log(Function.prototype.__proto__ === Object.prototype);

输出全是 true

注
① person.constructor === Person.prototype.constructor 原型链
② Person.prototype 是对象，是 Object 类型的实例
③ Object 是构造函数，于是它是 Function 的实例，其内部有 [[proto]]指向实例的原型

参考：https://github.com/mqyqingfeng/Blog/issues/2