Js几种继承实现方式

看继承之前，建议先了解一下原型、原型链和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('鱼')); // 小猫正在吃鱼

这种原型继承的特点：既继承了父类的模板，又继承了父类的原型对象，并且代码无冗余。

缺点就是实现较为复杂。

 

转载于:https://www.cnblogs.com/Tangttt/p/9686907.html