JS继承方式

要实现继承先定义一个父类

1
2
3
4
5
6
7
8
9
function Animal (name) {
this.name = name || 'Animal';
this.sleep = function(){
console.log(this.name + '正在睡觉!');
}
}
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃:' + food);
};

原型链继承

核心: 将父类的实例作为子类的原型。

1
2
function Cat () {}
Cat.prototype = new Animal('cat');

构造继承

核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类。

1
2
3
4
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}

实例继承

核心:为父类实例添加新特性,作为子类实例返回。

1
2
3
4
5
function Cat(name){
var instance = new Animal();
instance.name = name || 'Tom';
return instance;
}

拷贝继承

1
2
3
4
5
6
7
function Cat(name){
var animal = new Animal();
for(var p in animal){
Cat.prototype[p] = animal[p];
}
Cat.prototype.name = name || 'Tom';
}

组合继承

核心:构造继承 + 原型链继承,会调用了两次父类构造函数,生成了两份实例。

1
2
3
4
5
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal();

寄生组合继承

核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点。

1
2
3
4
5
6
7
8
9
10
11
12
// 实例属性
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
// 公有属性
(function(){
var Super = function(){};
Super.prototype = Animal.prototype;
Cat.prototype = new Super();
Cat.prototype.constructor = Cat;
})();

其实上述共有属性的继承方式也就是模仿Object.create()的原理,所以也可以写成:

1
cat.prototype = Object.create(Animal.prototype, {constructor:{ value: Cat }})