关于JavaScript继承和原型链

Before we get started

首先明确，JS的继承是由原型链来实现的。（即使在ES6中class的extends，也更像是一种语法糖）

当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（object ）都有一个私有属性（称之为 __proto__）指向它的原型对象（prototype）。该原型对象也有一个自己的原型对象，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

C++和Java使用new命令时，都会调用”类”的构造函数（constructor）
在Javascript语言中，new命令后面跟的不是类，而是构造函数
在 JavaScript 中，构造器其实就是一个普通的函数。当使用 new 操作符来作用这个函数时，它就可以被称为构造方法（构造函数）。

那么new运算符具体干了什么呢？

1
2
3

var obj  = {};
obj.__proto__ = F.prototype;
F.call(obj);

即

var o = new Foo();
// JavaScript 实际上执行的是：
var o = new Object();
o.__proto__ = Foo.prototype;
Foo.call(o);

关于proto和prototype

那么上面的__proto__和prototype又是什么呢？

对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型。
eg.

1
2
3

let o1 = new Object()
// 则
o1.__proto__ ===  Object.prototype // true

而Function是特殊的对象，在Function中，除了和其他对象一样有__proto__对象以外，还有原型属性（prototype），这个属性指向原型对象，而原型对象有个叫constructor的属性，指回原构造函数。
eg.

let f1 = new Foo()
// 则
f1.__proto__ === Foo.prototype
Foo.__proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null
Foo.prototype.constructor === Foo

Object的原型对象用Object.prototype.__proto__ = null表示原型链的最顶端，如此变形成了javascript的原型链继承，同时也解释了为什么所有的javascript对象都具有Object的基本方法。

Object关于prototype的两个方法

// 等同于 B.__proto__= A
Object.setPrototypeOf(B, A)
// 从子类上获取父类
Object.getPrototypeOf(B)

JavaScript实现继承的几种方式

构造继承

function dog (name) {
	this.name = name
}
// 共享的属性放在prototype中，只要更改prototype，所有实例的master属性都会被更改
dog.prototype = { master: 'Fog' }
// 生成两个实例对象
let dog1 = new dog('111')
let dog2 = new dog('222')
console.log(dog1.master) // Fog
console.log(dog2.master) // Fog
// 更改master
dog.prototype.master = 'Misty'
console.log(dog1.master) // Misty
console.log(dog2.master) // Misty

由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像”继承”了prototype对象一样。

原型继承

即：把父类的私有+公有的属性和方法，都作为子类公有的属性。
核心思想：Child.prototype = new Parent()
实现的本质是重写了原型对象，通过将子类的原型指向了父类的实例，所以子类的实例就可以通过__proto__访问到 Child.prototype 也就是 Parent的实例

实例继承

核心思想：

function Child() {
	let instance = new Parent()
	return instance
}

拷贝继承

核心思想：循环遍历父类实例，然后父类实例的私有方法全部拿过来添加给子类实例

Call继承

核心思想：

1
2
3

function Child() {
	Parent.call(this); //构造函数中的this就是当前实例
}

注意：call是function的方法

中间件继承

核心思想：Child.prototype.__proto__ = Parent.prototype

Object.create()

ECMAScript 5 中引入了一个新方法：Object.create()。可以调用这个方法来创建一个新对象。新对象的原型就是调用 create 方法时传入的第一个参数。

ES6的extends

首先说明，ES6的Class中，所有定义的function方法（注意：在定义类的方法时，前面不需要加上 function 这个保留字），都是定义在prototype属性上的。
即：在类的实例上调用方法，其实就是调用原型上的方法。
此外，在类的内部定义的所有方法都是不可枚举的。（与ES5不同，注意）

Class之间可以通过extends关键字实现继承。
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承了父类的this对象。如果不调用super方法，子类就得不到this对象。
这与ES5不同：ES5是先创建子类的this，再将父类的方法添加到this上（Parent.apply(this)）
而ES6：先创建父类的this，然后再用子类的构造函数修改this

而super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的