首页手记看完这篇文章，你应该懂什么叫js继承了吧

看完这篇文章，你应该懂什么叫js继承了吧

标签：

JavaScript Vue.js 算法

说到继承呢？肯定有很多做java的朋友都觉得是一个比较简单的东西了。毕竟面向对象的三大特征就是：封装、继承和多态嘛。但是真正对于一个javascript开发人员来说，很多时候其实你使用了继承，但其实你不知道这叫继承。今天我就借这篇文章来谈一谈继承在前端的几种实现方式。

一、原型继承

function Animal(name = 'animal'){
	this.name = name
}
Animal.prototype.eat = function(food){
	console.log('dasdsa')
	return `${this.name} eat ${food}`;
}

function Dog(){
}
Dog.prototype = new Animal();

var instance = new Dog();
instance.name = 'dog';
console.log(instance.eat('bone'));
console.log(instance instanceof Dog); // true
console.log(instance instanceof Animal); // true

但是原型继承有有有些缺点，来看下面一段代码：

function Animal(name = 'animal'){
	this.name = name
	this.skinColors = ['black','white']
}
Animal.prototype.eat = function(food){
	return `${this.name} eat ${food}`;
}

function Dog(){
}
Dog.prototype = new Animal();

var instance = new Dog();
instance.name = 'keji';
instance.skinColors.push('red');
console.log(instance.eat('bone'));
console.log(instance instanceof Dog); // true
console.log(instance instanceof Animal); // true

var instance1 = new Dog()
console.log(instance1.skinColors) // [ 'black', 'white', 'red' ]

从上面的代码，我们可以清楚的发现：所有的实例都会公用一个原型链，如果一个实例中修改原型那么所有实例的值都会被修改。

二、构造函数继承

针对前面原型链继承可能会存在公用一个原型链的问题，那么我们可以给大家介绍一种方式：构造函数的继承。构造函数的继承相当于将父类复制给子类。

function Animal(name = 'animal'){
	this.name = name
	this.skinColors = ['black','white']
}
Animal.prototype.eat = function(food){
	return `${this.name} eat ${food}`;
}

function Dog(){
	Animal.call(this);
}

var instance = new Dog();
instance.name = 'keji';
instance.skinColors.push('red');
console.log(instance.eat('bone')); // TypeError: instance.eat is not a function
console.log(instance instanceof Dog); // true
console.log(instance instanceof Animal); // true

var instance1 = new Dog();
console.log(instance1.skinColors); // [ 'black', 'white' ]

但是这种方法也有自己缺点：

不能继承原型上面的属性和方法
复制的处理，相当于在子类中实现了所有父类的方法，影响子类的性能。

三、组合继承

原型链继承能继承父类原型链上的属性，但是可能会存在篡改的问题；而构造函数继承不会存在篡改的问题，但是不能继承原型上面的属性。那么我们是不是可以将两者进行结合呢？

function Animal(name = 'animal'){
	this.name = name
	this.skinColors = ['black','white']
}
Animal.prototype.eat = function(food){
	return `${this.name} eat ${food}`;
}

function Dog(){
	Animal.call(this);
}
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;


var instance = new Dog();
instance.name = 'keji';
instance.skinColors.push('red');
console.log(instance.eat('bone'));
console.log(instance.skinColors) // [ 'black', 'white', 'red' ]
console.log(instance instanceof Dog); // true
console.log(instance instanceof Animal); // true

var instance1 = new Dog()
console.log(instance1.skinColors) // [ 'black', 'white' ]

这种方法呢？调用了两次父类的构造函数，有些许损耗性能，并且子类的构造函数的属性会和原型上面的属性相重合。（优先原用构造函数的属性）

四、原型式继承

function object(obj){
  function F(){}
  F.prototype = obj;
  return new F();
}


let Programmer = {
	features:["tutou","jiaban","single"]
}

// 方式一：最原始的做法
var programmer1 = object(Programmer);
programmer1.features.push('meiqian');
console.log(programmer1.features); // [ 'tutou', 'jiaban', 'single', 'meiqian' ]
var programmer2 = object(Programmer);
console.log(programmer2.features); // [ 'tutou', 'jiaban', 'single', 'meiqian' ]

// 方式二 es中的Object.create
var programmer3 = Object.create(Programmer);
console.log(programmer3.features); // [ 'tutou', 'jiaban', 'single', 'meiqian' ]

从上面的代码很明显的可以发现：和构造函数继承一样也存在被篡改的可能，并且也不能传递参数。

五、寄生式继承

在原型式继承的基础上面增强了对象，并返回构造函数。

function pFactory(obj){
	let clone = Object.create(obj);
	clone.motto = function(){
		console.log('hardworking and not lazy!!')
	}
	return clone;
}

var programmer1 = new pFactory(Programmer);
console.log(programmer1.motto()); // hardworking and not lazy!!
console.log(programmer1.features); // [ 'tutou', 'jiaban', 'single' ]

这种继承的方法同样和原型继承一样，存在被篡改的可能。

六、寄生组合式继承

前面说了这么多，每种继承方式都有自己的优点和缺点，那么是不是可以将这些继承的方式做一个合并：以他之长补己之短呢？来看下面一段代码：

function Animal(name = 'animal'){
	this.name = name
	this.skinColors = ['black','white']
}
Animal.prototype.eat = function(food){
	return `${this.name} eat ${food}`;
}

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype);
  prototype.constructor = subType; 
  subType.prototype = prototype;
}


function Dog(name,sound){
	Animal.call(this,name);
	this.sound = sound;
}

inheritPrototype(Dog,Animal);

Dog.prototype.getSound = function(){
	console.log(`${this.name} ${this.sound}`);
}

var instance = new Dog('keji','wangwangwang!!!');
instance.skinColors.push('red');
console.log(instance.eat('bone'));
console.log(instance.skinColors) // [ 'black', 'white', 'red' ]
console.log(instance instanceof Dog); // true
console.log(instance instanceof Animal); // true
console.log(instance.getSound()) // keji wangwangwang!!!

var instance1 = new Dog('haha','wangwang!!!')
console.log(instance1.skinColors) // [ 'black', 'white' ]
console.log(instance1.getSound()) // haha wangwang!!!

这个例子的效率的体现在它只调用了一次父类的构造函数，这很大程度上面减少创建了不必要多余的属性。并且还能继承原型链上面的方法。这个方法是现在库的实现方法。

七、 es6的继承方法

class Animal {
	constructor(name){
		this.name = name;
	}

	get getName(){
		return this.animalName()
	}

	animalName(){
		return this.name;
	}

}

class Dog extends Animal{
	constructor(name,sound){
		super(name);
		this.sound = sound;
	}
	get animalFeature(){
		return `${this.getName} ${this.sound}`
	}
}

let dog = new Dog('keji','wangwangwang!');
console.log(dog.animalFeature); // keji wangwangwang!

其实我们晓得，class语法也是由es5语法来写的，其继承的方法和寄生组合式继承的方法一样。关于es6的类，我在代码自检的时候遇到的两个重点，值得注意下的是：

函数声明会提升，类声明不会。
ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上。但是es6是先创建父类的实例对象this，然后再用子类的构造函数修改this。

说在最后

好像什么都没写就差不多快12点了，最近在疯狂的复习。但是却发现越学东西越多，感觉有点学不完的意味在里面外加上最近好像有点高考考砸之后的失眠综合症，搞的我整个人都不怎么舒服。明明高考都过去差不多6年了，还一直困扰着我，贼恐怖，算了算了先不写了睡觉去了。
最后最后提到一句，欢迎大家点赞，关注我的个人博客，我会源源不断的输出高质量文章的。

点击查看更多内容