Javascript继承的原理

JavaScript的继承是通过原型链继承，与传统面向对象的继承方式不同。

prototype与原型

---

我们从头开始梳理，引入prototype与原型

function Person() {}
Person.prototype.name = "Leo";
let person_a = new Person();
let person_b = new Person();
person_a.name //Leo
person_b.name //Leo

Person.prototype指向了一个对象，这个对象是用Person这个构造函数构造出来的实例的原型，即person_a和person_b的原型。
-->

• 构造函数的prototype指向了构造函数实例化对象的原型。

• 原型就是个对象。
  上面阐明了构造函数的prototype和实例的原型的关系如下。

  
  Figure 1
  

  那么就可以引入一个新的问题，实例和原型之间有是怎样的关系？
  引入第三个概念，_proto_

__proto__

---

__proto__是什么

这是每一个JavaScript对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向该对象的原型。
测试代码如下：

function Person() {}
person = new Person()
person.__proto__ === Person.prototype // true

换句话说，实例的__proto__和构造函数的prototype指向的是同一个对象。
即，构造函数、实例对象和原型三者关系如下

Figure 2

截止到目前为止，实例和构造函数指向Person.prototype这个对象（原型）都是单向的，那么原型是否有属性指向实例和构造函数？
结论：没有指向实例的(实例有无限个，其实原型也指不过来= = ），但是原型有属性可以指向构造函数。引入第四个概念，constructor。

constructor

---

每个原型都有一个 constructor 属性指向关联的构造函数。

function Person() {}
person = new Person()
Person.prototype.constructor === Person  // true

则，新关系如如下

Figure 3

综上可得，对于单个构造函数和对象来说，有如下关系

function Person() {}
var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

了解清楚了三者的关系之后，在开始引入继承之前，先来进一步详细了解一下实例与原型的关系。

实例与原型

---

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
一段很常见的验证的代码。

Person = function() {}
Person.prototype.name = "leo"
person = new Person()
person.name = "aha"
console.log(person.name)  // "aha"
delete person.name
console.log(person.name) // "leo"

如果在上述代码delete之前打印出person,可以在chrome浏览器的console看到下图，可以较为清晰的看出实例对象与原型的关系。

Figure 4

思考，如果在上述代码末尾，添加如下代码，在实例的原型中没有找到name字段，在原型这个对象实例的原型上，js会继续向上寻找，那么原型的原型是什么？

delete person.__proto__.name
console.log(person.name)

原型的原型

---

其实到这一步，大家应该已经看出来可以通过对象的proto，即原型构造出来一个链式结构了。
即，原型其实也是一个对象，这个对象也存在他的proto，一直到root节点。
那么，root节点在哪里，我们知道JavaScript最基本的对象就是Object, 在上面几个小节中person对象的原型person.proto，他的原型就是Object.prototype。先更新一波关系图示

Figure 5

那么Object.prototype的原型是谁？

Object.prototype.__proto__ // null

可见是null。更新关系图如下

Figure 6

图中蓝色部分，即为原型链。实例对象通过proto属性，构成了一条原型组成的链式结构一直到Object.prototype对象的原型null。
接下来聊聊继承。

继承

---

JavaScript的继承，默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。可用下图的关系来理解JavaScript的继承方式。

Figure 7

补充

---

• 待补充模块：
  • JavaScript继承的实现梳理
• Refs：
  • https://github.com/mqyqingfeng/Blog