参考https://zhuanlan.zhihu.com/p/25578222

es6之前的继承

原型链继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Parent(name) { 
this.name = name;
}
Parent.prototype.sayName = function() {
console.log('parent name:', this.name);
}
function Child(name) {
this.name = name;
}

Child.prototype = new Parent('father');
Child.prototype.constructor = Child;

Child.prototype.sayName = function() {
console.log('child name:', this.name);
}

var child = new Child('son');
child.sayName(); // child name: son

只要是原型链中出现过的原型,都可以说是该原型链派生的实例的原型。
这种方法存在两个缺点:
子类型无法给超类型传递参数,在面向对象的继承中,我们总希望通过 var child = new Child(‘son’, ‘father’); 让子类去调用父类的构造器来完成继承。而不是通过像这样 new Parent(‘father’) 去调用父类。
Child.prototype.sayName 必须写在 Child.prototype = new Parent(‘father’); 之后,不然就会被覆盖掉。

类式继承:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Parent(name) { 
this.name = name;
}
Parent.prototype.sayName = function() {
console.log('parent name:', this.name);
}
Parent.prototype.doSomthing = function() {
console.log('parent do something!');
}
function Child(name, parentName) {
Parent.call(this, parentName);
this.name = name;
}

Child.prototype.sayName = function() {
console.log('child name:', this.name);
}

var child = new Child('son');
child.sayName(); // child name: son
child.doSomthing(); // TypeError: child.doSomthing is not a function

相当于 Parent 这个函数在 Child 函数中执行了一遍,并且将所有与 this 绑定的变量都切换到了 Child 上,这样就克服了第一种方式带来的问题。
缺点:没有原型,每次创建一个 Child 实例对象时候都需要执行一遍 Parent 函数,无法复用一些公用函数。

组合继承:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

Parent.prototype.sayName = function() {
console.log('parent name:', this.name);
}
Parent.prototype.doSomething = function() {
console.log('parent do something!');
}

///////////////上面是父类声明
function Child(name, parentName) {
Parent.call(this, parentName);
this.name = name;
} //类式继承核心

Child.prototype = new Parent();//原型链继承核心
Child.prototype.constructor = Child;

//////////////////////////////////下面是公共部分
Child.prototype.sayName = function() {
console.log('child name:', this.name);
}

var child = new Child('son');
child.sayName(); // child name: son
child.doSomething(); // parent do something!

组合式继承是比较常用的一种继承方法,其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。
这样,既通过在原型上定义方法实现了函数复用,又保证每个实例都有它自己的属性。

组合式继承是 JS 最常用的继承模式,但组合继承使用过程中会被调用两次:一次是创建子类型的时候,另一次是在子类型构造函数的内部。

es6的继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class Parent {
constructor(name) {
this.name = name;
}
doSomething() {
console.log('parent do something!');
}
sayName() {
console.log('parent name:', this.name);
}
}

class Child extends Parent {
constructor(name, parentName) {
super(parentName);
this.name = name;
}
sayName() {
console.log('child name:', this.name);
}
}

const child = new Child('son', 'father');
child.sayName(); // child name: son
child.doSomething(); // parent do something!

const parent = new Parent('father');
parent.sayName(); // parent name: father

就很简单 跟java一样

deeper 寄生组合式继承:

在前面的组合继承中,会有两次父类调用 寄生组合可以避免这种问题
我们第一次调用构造函数的时候,其实是不管构造函数里面的内容,所以我们何不 new 一个空函数,将其 prototype 指向 Parent.prototype,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function Parent(name) {
this.name = name;
}
Parent.prototype.sayName = function() {
console.log('parent name:', this.name);
}

function Child(name, parentName) {
Parent.call(this, parentName);
this.name = name;
}

function create(proto) {
function F(){}
F.prototype = proto;
return new F();
}

Child.prototype = create(Parent.prototype);
Child.prototype.sayName = function() {
console.log('child name:', this.name);
}
Child.prototype.constructor = Child;

var parent = new Parent('father');
parent.sayName(); // parent name: father


var child = new Child('son', 'father');
child.sayName(); // child name: son

这就是所谓的寄生组合式继承方式,跟组合式继承的区别在于,他不需要在一次实例中调用两次父类的构造函数,假如说父类的构造器代码很多,还需要调用两次的话对系统肯定会有影响,寄生组合式继承的思想在于:用一个 F 空的构造函数去取代执行了 Parent 这个构造函数。

在上面的代码中,我们手动创建了一个 create 函数,但是其实是存在于 Object 对象中,不需要我们手动去创建,所以上面的代码可以改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function Parent(name) {
this.name = name;
}
Parent.prototype.sayName = function() {
console.log('parent name:', this.name);
}

function Child(name, parentName) {
Parent.call(this, parentName);
this.name = name;
}

function inheritPrototype(Parent, Child) {
Child.prototype = Object.create(Parent.prototype); //修改
Child.prototype.constructor = Child;
}

inheritPrototype(Parent, Child);

Child.prototype.sayName = function() {
console.log('child name:', this.name);
}

var parent = new Parent('father');
parent.sayName(); // parent name: father

var child = new Child('son', 'father');
child.sayName(); // child name: son