看继承之前,建议先了解一下原型、原型链和prototype之间的关系。
一、原型继承
// 父类
function Animal(name){
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉');
}
}
// 父类的原型方法
Animal.prototype.eat = function(food){
console.log(this.name + '正在吃' + food)
}
// 子类
function Cat(){}
// 继承实现
Cat.prototype = new Animal('小猫');
// 核心: 将父类的实例作为子类的原型
var cat = new Cat();
console.log(cat.name); // 小猫
console.log(cat.sleep()); // 小猫正在睡觉
console.log(cat.eat('鱼')); // 小猫正在吃鱼
这种原型继承的特点:既继承了父类的模板,又继承了父类的原型对象。
优点是继承了父类的模板,又继承了父类的原型对象;
缺点就是父类实例传参,不是子类实例化传参,不符合常规语言的写法。
二、构造继承
// 父类
function Animal(name){
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉');
}
}
// 父类的原型方法
Animal.prototype.eat = function(food){
console.log(this.name + '正在吃' + food)
}
// 子类
function Cat(name){
//call apply 实现继承
Animal.call(this, name);
}
var cat = new Cat('小猫');
console.log(cat.name); // 小猫
console.log(cat.sleep()); // 小猫正在睡觉
console.log(cat.eat('鱼')); // undefined 父类的原型方法没有继承
这种原型继承的特点:继承了父类的模板,不继承了父类的原型对象。
优点是方便了子类实例传参;
缺点就是不继承了父类的原型对象。
三、混合继承(原型继承和构造继承)
// 父类
function Animal(name){
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉');
}
}
// 父类的原型方法
Animal.prototype.eat = function(food){
console.log(this.name + '正在吃' + food)
}
// 子类
function Cat(name){
//call apply 实现继承
Animal.call(this, name);
}
Cat.prototype = new Animal();
var cat = new Cat('小猫');
console.log(cat.name); // 小猫
console.log(cat.sleep()); // 小猫正在睡觉
console.log(cat.eat('鱼')); // 小猫正在吃鱼
这种原型继承的特点:既继承了父类的模板,又继承了父类的原型对象。
优点方便了子类实例传参;
缺点就是调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)。
四、寄生组合继承
// 父类
function Animal(name){
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉');
}
}
// 父类的原型方法
Animal.prototype.eat = function(food){
console.log(this.name + '正在吃' + food)
}
// 子类
function Cat(name){
//call apply 实现继承
Animal.call(this, name);
}
(function(){
// 这里只继承父类原型上的方法
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();
var cat = new Cat('小猫');
console.log(cat.name); // 小猫
console.log(cat.sleep()); // 小猫正在睡觉
console.log(cat.eat('鱼')); // 小猫正在吃鱼
这种原型继承的特点:既继承了父类的模板,又继承了父类的原型对象,并且代码无冗余。
缺点就是实现较为复杂。