Javascrip—继承（10）

本文以《JavaScript高级程序设计》上的内容为骨架，补充了ES6 Class的相关内容，从我认为更容易理解的角度将继承这件事叙述出来，但愿你们能有所收获。

1. 继承分类 先来个总体印象。如图所示，JS中继承能够按照是否使用object函数（在下文中会提到），将继承分红两部分（Object.create是ES5新增的方法，用来规范化这个函数）。

其中，原型链继承和原型式继承有同样的优缺点，构造函数继承与寄生式继承也相互对应。寄生组合继承基于Object.create, 同时优化了组合继承，成为了完美的继承方式。ES6 Class Extends的结果与寄生组合继承基本一致，可是实现方案又略有不一样。

下面立刻进入正题。

2. 继承方式 上图上半区的原型链继承，构造函数继承，组合继承，网上内容比较多，本文不做详细描述，只指出重点。

2.1 原型链继承

核心：将父类的实例做为子类的原型

SubType.prototype = new SuperType() 
// 全部涉及到原型链继承的继承方式都要修改子类构造函数的指向，不然子类实例的构造函数会指向SuperType。
SubType.prototype.constructor = SubType;
复制代码

优势：父类方法能够复用

缺点：

父类的引用属性会被全部子类实例共享 子类构建实例时不能向父类传递参数

2.2 构造函数继承

核心：将父类构造函数的内容复制给了子类的构造函数。这是全部继承中惟一一个不涉及到prototype的继承。

SuperType.call(SubType);
复制代码

优势：和原型链继承彻底反过来。

父类的引用属性不会被共享 子类构建实例时能够向父类传递参数 缺点：父类的方法不能复用，子类实例的方法每次都是单首创建的。

2.3 组合继承

核心：原型式继承和构造函数继承的组合，兼具了两者的优势。

function SuperType() {
    this.name = 'parent';
    this.arr = [1, 2, 3];
}

SuperType.prototype.say = function() { 
    console.log('this is parent')
}

function SubType() {
    SuperType.call(this) // 第二次调用SuperType
}

SubType.prototype = new SuperType() // 第一次调用SuperType
复制代码

优势：

父类的方法能够被复用 父类的引用属性不会被共享 子类构建实例时能够向父类传递参数 缺点： 调用了两次父类的构造函数，第一次给子类的原型添加了父类的name, arr属性，第二次又给子类的构造函数添加了父类的name, arr属性，从而覆盖了子类原型中的同名参数。这种被覆盖的状况形成了性能上的浪费。

2.4 原型式继承

核心：原型式继承的object方法本质上是对参数对象的一个浅复制。 优势：父类方法能够复用 缺点：

父类的引用属性会被全部子类实例共享 子类构建实例时不能向父类传递参数

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

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"
复制代码

ECMAScript 5 经过新增 Object.create()方法规范化了原型式继承。这个方法接收两个参数:一 个用做新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的状况下， Object.create()与 object()方法的行为相同。——《JAVASCript高级编程》

因此上文中代码能够转变为

var yetAnotherPerson = object(person); => var yetAnotherPerson = Object.create(person);
复制代码

2.5 寄生式继承

核心：使用原型式继承得到一个目标对象的浅复制，而后加强这个浅复制的能力。 优缺点：仅提供一种思路，没什么优势

function createAnother(original){ 
    var clone=object(original);    //经过调用函数建立一个新对象
    clone.sayHi = function(){      //以某种方式来加强这个对象
        alert("hi");
    };
    return clone;                  //返回这个对象
}

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"
复制代码

2.6 寄生组合继承 刚才说到组合继承有一个会两次调用父类的构造函数形成浪费的缺点，寄生组合继承就能够解决这个问题。

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype); // 建立了父类原型的浅复制
    prototype.constructor = subType;             // 修正原型的构造函数
    subType.prototype = prototype;               // 将子类的原型替换为这个原型
}

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
};

function SubType(name, age){
    SuperType.call(this, name);
    this.age = age;
}
// 核心：由于是对父类原型的复制，因此不包含父类的构造函数，也就不会调用两次父类的构造函数形成浪费
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
    alert(this.age);
}
复制代码

优缺点：这是一种完美的继承方式。

2.7 ES6 Class extends

核心： ES6继承的结果和寄生组合继承类似，本质上，ES6继承是一种语法糖。可是，寄生组合继承是先建立子类实例this对象，而后再对其加强；而ES6先将父类实例对象的属性和方法，加到this上面（因此必须先调用super方法），而后再用子类的构造函数修改this。

class A {}

class B extends A {
  constructor() {
    super();
  }
}
复制代码

ES6实现继承的具体原理：

class A {
}

class B {
}

Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);
复制代码

ES6继承与ES5继承的异同： 相同点：本质上ES6继承是ES5继承的语法糖 不一样点：

ES6继承中子类的构造函数的原型链指向父类的构造函数，ES5中使用的是构造函数复制，没有原型链指向。 ES6子类实例的构建，基于父类实例，ES5中不是。

3. 总结

ES6 Class extends是ES5继承的语法糖 JS的继承除了构造函数继承以外都基于原型链构建的 能够用寄生组合继承实现ES6 Class extends，可是仍是会有细微的差异

这里推荐一下个人前端学习交流群：784783012 ，里面都是学习前端的，若是你想制做酷炫的网页，想学习编程。本身整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工做中想提高本身能力的，正在学习的小伙伴欢迎加入学习。