JavaScript继承

一、继承的概念

谈到继承首先应该说明一下类和对象的概念。类是拥有共通属性和行为的实体的抽象，而对象是一个具体的实例。例如下面这个类Person（人）：

function Person(name, age) {
		this.name = name;
  	this.age = age;
  	this.sayHello = function() {
    	console.log('hello');
    }
}

const p1 = new Person('张三', 11);
const p2 = new Person('李四', 26);

所有的人都有姓名、年龄和讲话的属性，因此Person是对人的一个抽象。张三、李四分别是两个具体的人的实例，即两个对象。他们有不同的名字属性和年龄属性。

js中通过构造函数来实现类。使用new操作符调用函数创建对象时候，这个函数就是一个构造函数。

一个对象的属性包括两种：函数和普通属性，对于普通属性而言，当然是不同实例有自己的属性，就像张三李四不同人有不同的姓名和年龄。而对于函数属性，所有的实例都是一样的。因此大部分情况，类的普通属性应该作为私有属性，而函数属性作为原型属性。

继承是建立在面向对象基础上的一种代码复用方式，子类通过继承来复用父类的代码。

由于es6之前，js的构造函数式面向对象语法与传统面向对象编程语言有所区别，js并未在语法层面支持继承的操作，因此js需要通过原型链特性、call apply等的应用来实现继承。

下面说明如何实现js继承，以及继承的最佳实践。

二、继承的最佳实践

js继承的最佳实践是“寄生组合式继承”，它用到了原型继承和借用构造函数继承。

1. 原型继承

根据js原型链特性，在访问对象属性时候，如果对象私有属性中没有该属性，会去对象的构造函数的prototype中查找。因此我们可以将子类构造函数的prototype赋值为父类的实例，这样在子类对象中查找属性找不到时候，就可以在父类实例中找到，从而让子类可以使用父类的属性。

下面看《js高级程序设计》中给出的案例

function SuperType() {
	this.property = true;
}

SuperType.prototype.getSuperValue = function () {
	return this.property;
}

// 继承SuperType
function SubType() {
	this.subProperty = false;
}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
	return this.subProperty;
}

原型继承的实现：子类的prototype = 父类的实例

原型继承特点：可以继承父类的私有属性和原型属性

原型继承的缺点：1. 无法向父类构造函数传参。2. 继承的属性都是原型属性，不能继承私有属性

2. 借用构造函数继承

为了解决原型继承不能传参和不能继承私有属性的缺点，可以使用借用构造函数继承。借用构造函数用call或者apply方法在子类构造函数中调用父类构造函数，从而让子类拥有父类的私有属性。

下面看案例

function SuperType(property) {
	this.property = property;
}

function SubType(property) {
	superType.call(this, property);
}

var instance1 = new SubType(false);
console.log(instance1.property); // false

var instance2 = new SubType(true);
console.log(instance2.property); // true

借用构造函数继承的实现：在子类构造函数中使用call/apply调用父类构造函数，将父类构造函数指向子类实例。

借用构造函数继承的特点：1. 在子类中可以给父类传参。2. 可以继承父类的私有属性。

借用构造函数继承的缺点：只能继承父类的私有属性，不能继承父类的原型属性。

3. 组合继承

借用构造函数继承解决了原型继承子类不能给父类传参问题，但是又带来了子类不能继承父类原型属性的问题。如何让子类既能继承父类的原型属性又能继承父类的私有属性呢？

可以通过将原型继承和借用构造函数继承结合起来，即组合继承。

看下面示例代码

function SuperType(property) {
	this.property = property;
}

SuperType.prototype.getSuperValue = function () {
	return this.property;
}

function SubType(property, subProperty) {
	SuperType.call(this, property);
  this.subProperty = subProperty;
}

SubType.prototype = new SuperType(false);

SubType.prototype.getSubValue = function () {
	return this.subProperty;
}

上面代码组合使用了原型继承和借用构造函数继承，让子类即继承了父类的原型属性也继承了父类的私有属性，需要注意的是，SuperType类的property属性既存在于SubType的私有属性中，也存在于SubType的原型属性中，这导致了不必要的重复。

组合继承的实现：同时使用原型继承和借用构造函数继承

组合继承的特点：1. 子类可以继承父类原型属性和私有属性。2. 子类可以给父类传参

组合继承的缺点：对于父类的私有属性，子类继承时候同时存在于私有属性和原型属性中，造成了冗余

4. 寄生组合式继承

组合继承实现了子类继承父类私有属性和原型属性，但是有冗余的问题，如何解决冗余问题呢？首先看下为什么会有冗余问题。

我们已经知道，借用构造函数继承让子类只继承了父类的私有属性，而没有继承原型属性，而原型继承让子类同时继承了父类的私有属性和原型属性 ， 这样，父类的私有属性就继承了两遍，导致了冗余。那么如果在使用借用构造函数继承之后，不用原型继承，而是用其他方法让子类只继承父类的原型属性而不继承父类的私有属性，就可以避免冗余了。 下面说明如何让子类只继承父类的原型属性而不继承父类的私有属性。

我们知道原型继承是给子类的构造函数的prototype赋值为父类的一个对象，由于父类的对象中既可以访问到父类的私有属性也可以访问到父类的原型属性，因此导致子类多继承了父类的私有属性。如果我们不给子类构造函数的prototype赋值为父类对象，而是赋值为一个只有父类原型属性而没有父类私有属性的对象，那么子类就不会继承到父类的私有属性，只会继承父类的原型属性了。如何生成这样一个对象呢？

// 根据传入的父类生成只继承父类原型的对象
function geSubtPrototype(SuperType) {
	function Func() {}
  Func.prototype = SuperType.prototype;
  return new Func();
}

上面函数实现了根据传入的父类生成只继承父类原型的对象，其中的中的Func方法没有任何私有属性，Func的prototype指向了传入的父类的prototype，所以用Func实例化的对象可以访问SuperType的原型属性。

接下来看寄生组合继承的示例

function SuperType(property) {
	this.property = property;
}

SuperType.prototype.getSuperValue = function () {
	return this.property;
}

function SubType(property, subProperty) {
	SuperType.call(this, property);
  this.subProperty = subProperty;
}

SubType.prototype = geSubtPrototype(SuperType);

SubType.prototype.getSubValue = function () {
	return this.subProperty;
}

通过上面的示例可以看出，寄生组合继承方法实际是将组合寄生中原型继承去掉，使用另一种方法让子类只继承父类的原型。这样就实现了：1. 子类继承父类的私有属性和原型属性。2. 子类可以向父类传递参数。3. 继承后没有冗余属性。

寄生组合继承是js继承的最佳实践。

三、ES6面向对象

1. 类声明
2. 原型属性和私有属性
3. 继承、super