JavaScript 继承全解析

ES5的继承方式

ES6以前，JavaScript并无继承这一现有的机制。

类式继承

//声明父类
function Father(){
    this.fatherVal = 'father';
}
//为父类添加共有方法
Father.prototype.getFatherValue = function(){
    return this.fatherVal;
}
//声明子类 
function Child(){
    this.childVal = 'child';
}
//继承父类
Child.prototype = new Father();
//为子类添加共有方法
Child.prototype.getChildValue = function(){
    return this.childVal;
}
复制代码

子类的prototype被赋予父类的实例,新建立的对象复制了父类的构造函数内的属性和方法而且将原型_proto_指向了父类的原型对象，这样就拥有了父类的原型对象上的属性和方法与父类构造函数中复制的属性和方法。

var instance = new Child();
console.log(instance.getFatherValue());  //father
console.log(instance.getChildValue());   //child
console.log(instance instanceof Child);  //true
console.log(instance instanceof Father); //true
console.log(instance instanceof Object); //true
console.log(Child instanceof Father);    //false
console.log(Child.prototype instanceof Father);    //true
复制代码

缺点：

1. 子类实例共用父类的公有引用属性。
2. 没法对父类构造函数内的属性进行传参初始化。

function Father(){
    this.companies =['bigo','yy','uc']
}
funtion Child(){}
Child.prototype = new Father();
var instanceA = new Child();
var instanceB = new Child();
console.log(instanceB.companies); //['bigo','yy','uc']
instanceA.companies.push('nemo');
console.log(instanceB.companies); //['bigo','yy','uc','nemo']
复制代码

构造函数继承

//声明父类
function Father(val){
   this.companies =['bigo','yy','uc']
   this.val = val;
}
//声明父类原型方法
Father.prototype.getCom = function(){
    console.log(this.companies);
}
//声明子类
function Child(val){
    //继承
    Father.call(this,val);
}
var instanceA = new Child('childA');
var instanceB = new Child('childB');

instanceA.companies.push('nemo');
console.log(instanceA.companies); //['bigo','yy','uc','nemo']
console.log(instanceA.val); //childA
console.log(instanceB.companies); //['bigo','yy','uc']
console.log(instanceB.val); //childB
复制代码

对Child调用call，将子类中的变量在父类中执行一遍，而后父类给this绑定，因此子类继承了父类的公有属性。

缺点：

因为这种类型的继承没有涉及原型prototype，因此父类的原型方法不会被子类继承，而若是想被子类继承就必须放在构造函数中，这样建立出来的每一个实例都会单独拥有一份而不能共用。

组合继承

//声明父类
function Father(val){
   this.companies =['bigo','yy','uc']
   this.val = val;
}
//声明父类原型方法
Father.prototype.getValue = function(){
    console.log(this.val);
}
//声明子类
function Child(val,newVal){
    //构造函数式继承
    Father.call(this,val);
    this.newVal = newVal;
}
//类式继承
Child.prototype = new Father();
//声明子类原型方法
Child.prototype.getNewValue = function(){
    console.log(this.newVal);
}

var instanceA = new Child("fatherA","childA");
instanceA.companies.push('nemo');
console.log(instanceA.companies); //['bigo','yy','uc','nemo']
instanceA.getValue(); //fatherA
instanceA.getNewValue(); //childA

var instanceB = new Child("fatherB","childB");
console.log(instanceA.companies); //['bigo','yy','uc']
instanceB.getValue(); //fatherB
instanceB.getNewValue(); //childB
复制代码

缺点:

在使用构造函数继承使用执行了一遍父类的构造函数，在实现子类原型的类式继承再调用了一遍父类的构造函数，父类构造函数被调用了两次。

原型式继承

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

var situation = {
    companies:['bigo','yy','uc'];
    area:'guangzhou';
}

var situationA = inheritObject(situation);
situationA.area = 'shenzhen';
situationA.companies.push('tencent');

var situationB = inheritObject(situation);
situationB.area = 'beijing';
situationB.companies.push('baidu');

console.log(situationA.area);   //shenzhen
console.log(situationA.companies); //['bigo','yy','uc','tencent','baidu']
console.log(situationB.area); //beijing
console.log(situationB.companies); //['bigo','yy','uc','tencent','baidu']
console.log(situation.area);  //guangzhou
console.log(situation.companies); //['bigo','yy','uc','tencent','baidu']
复制代码

是类式继承的一个封装，其中的过渡对象就至关于类式继承的子类，而后返回新的实例化对象。

缺点：

跟类式继承同样，父类的公有引用属性被共有。

寄生式继承

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

var situation = {
    companies:['bigo','yy','uc'];
    area:'guangzhou';
}

function createSituation(obj){
    //经过原型继承建立新对象
    var newObj = new inheritObject(obj);
    //定义新对象方法
    newObj.getArea = function(){
        console.log(newObj.area)
    }
    //返回对象
    return obj;
}
复制代码

只是在原型式继承的基础上添加了新属性和方法，仍是跟原型式继承同样的缺点。

寄生式组合继承

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

//传递参数  child,parent 子类父类
function inheritPrototype(child,parent){
    //复制一份父类的原型副本保存在变量中;
    var fatherProto = inheritObject(father.prototype);
    //修正由于重写子类原型致使子类的constructor属性被修改;
    fatherProto.constructor = child;
    //设置子类的原型
    child.prototype = fatherProto;
}


//声明父类
function Father(val){
   this.companies =['bigo','yy','uc']
   this.val = val;
}
//声明父类原型方法
Father.prototype.getValue = function(){
    console.log(this.val);
}
//声明子类
function Child(val,newVal){
    //构造函数式继承
    Father.call(this,val);
    this.newVal = newVal;
}
//类式继承
Child.prototype = new Father();
inheritPrototype(Child,Father);
//声明子类原型方法
Child.prototype.getNewValue = function(){
    console.log(this.newVal);
}
复制代码

1. 在构造函数继承中咱们已经调用了父类的构造函数，还差一个原型的副本
2. 经过原型继承获得副本，可是这时候fatherProto的constructor须要指向子类。
3. 最后将副本fatherProto赋给子类的原型prototype。

总的来讲，就是既要构造函数，又要原型继承，可是又避免了组合继承的两次调用父类构造函数的问题,最大的改变式对子类原型赋予的式父类原型的一个引用。

var instanceA = new Child("fatherA","childA");
instanceA.companies.push('nemo');
console.log(instanceA.companies); //['bigo','yy','uc','nemo']
instanceA.getValue(); //fatherA
instanceA.getNewValue(); //childA

var instanceB = new Child("fatherB","childB");
console.log(instanceA.companies); //['bigo','yy','uc']
instanceB.getValue(); //fatherB
instanceB.getNewValue(); //childB

复制代码

注意点：

此时子类若是须要添加原型方法，必须经过prototype点语法一个个添加，不然会覆盖掉继承父类的原型对象。

ES6的继承方式

ES6 新增了Class语法，Class 能够经过extends关键字实现继承，这比 ES5 的经过修改原型链实现继承，要清晰和方便不少。

Class 继承

class Parent {
  constructor(value) {
    this.val = value
  }
  getValue() {
    console.log(this.val)
  }
}
class Child extends Parent {
  constructor(value) {
    super(value)
  }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

复制代码

class 实现继承的核心在于使用 extends 代表继承自哪一个父类，而且在子类构造函数中必须调用 super，由于这段代码能够当作 Parent.call(this, value)。

若是子类没有定义constructor方法，这个方法会被默认添加。