Lucas Liao's Blog

Js实现原生继承的几种方式

1.原型链继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fucntion SuperType() {
 this.name = 'hello'
}
SuperType.prototype.getName = function () {
 return this.name;
}
function SubType() {
 this.subName = 'enen'
}
SubType.prototype = new SuperType()
SubType.prototype.getSubName = function () {
 return this.subName;
}
const instance = new SubType();
instance.getName() // hello

缺点：

1.所有实例共享原型属性，当原型某个属性为引用类型，改属性的修改会对所有创建的实例造成影响。

2.无法向super类传递参数

借助构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
fucntion SuperType() {
 this.names = [1, 2, 3]
}
SuperType.prototype.getName = function () {
 return this.names;
}
function SubType() {
  SuperType.call(this)
}
const instance1 = new SubType();
instance.names.push(4);

const instance2 = new SubType();

instance1.names // 1, 2, 3, 4
instance1.names // 1, 2, 3

缺点： 方法都在构造函数中，函数无法复用

组合继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function SuperType(name) {
    this.name = name
}

SuperType.prototype.sayName = function () {
    return this.name;
}

function SubType(name) {
    SuperType.call(this, name);
    this.age = age;
}

SubType.prototype = new SuperType()
SubType.prototype.constructor = SubType()

缺点：在SuperType.call(this, name), SubType.prototype = new SuperType()中调用了两次SuperType的构造函数。

寄生组合式继承

通过借用构造函数来继承属性，通过原型链的混成模式继承方法。

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
function inherPrototype(subType, superType) {
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;    
}
function object(o) {
    function F() {}
    F.prototype = o;
    return new F()    
}

function SuperType(name) {
    this.name = name;
    this.colors = ['red']
}
SuperType.prototype.sayName = function () {
    return this.name;
}

function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}

inherPrototype(SubType, SuperType);

inherPrototype看起来比较绕，以上可通过Object.create()更加清晰实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function SuperType(name) {
    this.name = name;
    this.colors = ['red']
}
SuperType.prototype.sayName = function () {
    return this.name;
}

function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}

SubType.prototype = Object.create(SuperType.prototype);
SubType.prototype.constructor = SubType;