继承的5种实现方式

Posted by Rimin on 2019-05-04

1. 通过原型链的继承

1
2
3
4
5
6
7
8
9
10
11
function SuperClass(){
this.name = 'jack';
this.age = 12;
}
SuperClass.prototype.sayhi = function() {
console.log('hi, i am '+ this.name)
}

function SubClass() {}
SubClass.prototype = new SuperClass();
var obj = new SubClass()

2. 通过call实现继承

1
2
3
4
5
6
7
8
9
10
11
function SuperClass(name, age){
this.name = name;
this.age = age;
}
SuperClass.prototype.sayhi = function() {
console.log('hi, i am '+ this.name)
}
function SubClass(name, age) {
SuperClass.call(this, name, age)
}
var obj = new SubClass('ken', 23)

3. 组合继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 组合继承
function SuperClass(name, age){
this.name = name;
this.age = age;
}
SuperClass.prototype.sayhi = function() {
console.log('hi, i am '+ this.name)
}
function SubClass(name, age, sex) {
SuperClass.call(this, name, age)
this.sex = sex
}
SubClass.prototype.getName = function() {
console.log(this.name)
}
SubClass.prototype = SuperClass.prototype
// SubClass.prototype = new SuperClass
SubClass.prototype.constructor = SubClass

var obj = new SubClass('ken', 23, 0)

4. 寄生继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function SuperClass(name, age){
this.name = name;
this.age = age;
}
SuperClass.prototype.sayhi = function() {
console.log('hi, i am '+ this.name)
}
function SubClass(name, age, sex) {
SuperClass.call(this, name, age)
this.sex = sex
}
SubClass.prototype = Object.create(SuperClass.prototype,{
constructor: {
value: SubClass
}
})
var obj = new SubClass('ken', 23, 0)

5. ES6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class SuperClass {
construtor(name, age) {
this.name = name;
this.age = age;
}

}
class SubClass extends SuperClass {
constructor(name, age, num) {
super(name, age)
this.num = num
}
}
var instance1 = new SubClass("1", 20, 1)

问: ES5/ES6 的继承除了写法以外还有什么区别?

可以从这个例子中可以看出区别在于 子类能否寻找到继承的父类

1
2
3
4
5
6
class Super {}
class Sub extends Super {}

const sub = new Sub();

Sub.__proto__ === Super; // true
1
2
3
4
5
6
7
8
9
10
11
function Super() {}
function Sub() {}

Sub.prototype = new Super();
Sub.prototype.constructor = Sub;

var sub = new Sub();

Sub.__proto__ === Super.prototype; // false

Sub.__proto__ === Function.prototype; // true