【不务正业】Javascritp prototype

ES6/ES2015 引入了class 关键字，但那只是语法糖，JS的类实现还是基于原型的。

JS中只有一种结构: 对象_每个实例对象(object)都包含一个私有属性(__proto__) 指向他的构造函数的原型对象(prototype).该原型对象也有自己的原型对象(__proto__), 层层向上知道一个对象的原型对象为null.

---

原型链的继承

js 对象有一个指向原型对象的链。

customObject.[[Prototype]] 与构造函数 func的prototype有啥区别呢？
前者指向的是对象的原型，后者指的是被构造函数创建出来实例对象的[[Prototype]] 指向func 的 prototype属性

举个🌰

let fun = function() {
	this.prop1 = 1;
	this.prop2 = 2;
}

let obj = new fun(); // obj object is {prop1: 1, prop2: 2}
//	在函数的原型链上定义属性
obj.prototype.prop3 = 3;
obj.prototype.prop4 = 4;

// prop1 & prop2 是obj的自身属性
console.log(obj.prop1);
console.log(obj.prop2);
//	prop3 & prop4 不是obj自身属性
//	故根据原型链 发现是 obj.[[Proptype]] 的属性
console.log(obj.prop3);
console.log(obj.prop4);

一探究竟

console.log(obj)

匆匆一瞥

1. 上述log不难看出, obj.[[Prototype]] 非标准模式下就是 obj.__proto__
2. 上述的prototype，即构造函数的prototype是啥样呢，我们来一探究竟。
   
   • 不难看出prototype 属性，是被构造函数创造出来的对象.[[Prototype]]指向func 的 prototype 属性。

• obj.__proto__ 等于 obj.constructor.prototype 等同fun.prototype
• Object.prototype 表示Object的原型对象。

__proto__ constructor prototype 图示

上述描述的js class 实现源自于原型，那js中的继承链又是啥样的呢？因码飞_CC此位作者的该篇文章解释的很详尽，故此处不再赘述。

图片引用码飞_CC的该篇文章解释，关于上述图示的解释清点击上述引用链接。