ES6和ES5继承

一、ES5继承详解

Javascript利用原型链的特性来实现继承，就是通过将子类构造函数的原型作为父类构造函数的实例，这样就连通了子类-子类原型-父类， 原型链的特点就是逐层查找，从子类开始一直往上直到所有对象的原型Object.prototype，找到属性方法之后就会停止查找，所以下层的属性方法会覆盖上层。

1.原型链继承

一个基本的基于原型链的继承过程大概是这样的：

//父类，带属性
function Super(){
  this.flag = true
}

//为了提高复用性，方法绑定在父类原型属性上
//原型上的方法
Super.prototype.getFlag = function(){
  return this.flag
}

//子类
function Sub(){
  this.subFlag = false;
}

//实现继承
Sub.prototype = new Super()
//给子类添加子类特有的方法，注意顺序要在继承之后
Sub.prototype.getSubFlag = function (){
  return this.subFlag
}

//构造子类的实例
var es5 = new Sub;

输出：

原型链实现的继承主要有几个问题：
1、本来我们为了构造函数属性的封装私有性，方法的复用性，提倡将属性声明在构造函数内，而将方法绑定在原型对象上，但是现在子类的原型是父类的一个实例，自然父类的属性就变成子类原型的属性了；这就会带来一个问题，我们知道构造函数的原型属性在所有构造的实例中是共享的，所以原型中属性的改变会反应到所有的实例上，这就违背了我们想要属性私有化的初衷；
2、创建子类的实例时，不能向父类的构造函数传递参数

//构造函数的原型属性在所有构造的实例中是共享的
//所以原型中属性的改变会反应到所有的实例上
function Super(){
    this.flag = true;
}
function Sub(){
   this.subFlag = false;
}
Sub.prototype = new Super;
var obj = new Sub();
obj.flag = flase;  
//修改之后，由于是原型上的属性，之后创建的所有实例都会受到影响
var obj_2 = new Sub();
console.log(obj.flag)  //false；

为了解决以上两个问题，有一个叫借用构造函数的方法。

2.借用构造函数（apply和call方法）

只需要在子类构造函数内部使用apply或者call来调用父类的函数即可在实现属性继承的同时，又能传递参数，又能让实例不互相影响

function Super(){
    this.flag = true;
}
function Sub(){
    Super.call(this)  //如果父类可以需要接收参数，这里也可以直接传递
}
var obj = new Sub();
obj.flag = flase;
var obj_2 = new Sub();
console.log(obj.flag)  //依然是true，不会相互影响

通过call或者apply方法，我们实际上是在将来新创建的Sub实例的环境下调用了Super构造函数。这样一来，就会在新Sub对象上执行Super函数中定义的所有对象初始化代码，因此，每一个Sub的实例都会有自己的对象的副本。

缺点：
1.方法都在构造函数中定义，函数无法复用
2.在超类型中定义的方法，子类型不可见，结果所有类型都只能使用构造函数模式

3.组合继承

基本思想：将原型链和借用构造函数技术组合到一起。使用原型链实现对原型属性和方法的继承，用借用构造函数模式实现对实例属性的继承。这样既通过在原型上定义方法实现了函数复用，又能保证每个实例都有自己的属性。

缺点： 无论在什么情况下，都会调用两次父类型构造函数，一次是在创建子类型原型的时候，一次是在子类型构造函数的内部，寄生组合式继承只会调用一个父类构造函数

function Supertype(name){
    this.name = name;
    this.colors = ["red","green","blue"];
}
​
Supertype.prototype.sayName = function(){
    console.log(this.name);
};
​
function Subtype(name,age){
    \\继承属性
    Supertype.call(this,name);
    this.age  = age;
}
​
//继承方法
Subtype.prototype = new Supertype();
//不加下面句话会导致Subtype.prototype的constructor指向Supertype;
//constructor的定义是要指向原型属性对应的构造函数的，
//Subtype.prototype是Subtype构造函数的原型，所以应该添加一句纠正加了会指向他自己
Subtype.prototype.constructor = Subtype;

Subtype.prototype.sayAge = function(){
    console.log(this.age);
};
​
var instance1 = new Subtype('Annika',21);
instance1.colors.push("black");
//["red", "green", "blue", "black"]
console.log(instance1.colors); 
instance1.sayName(); //Annika
instance1.sayAge();  //21
​
var instance2 = new Subtype('Anna',22);
//["red", "green", "blue"]
console.log(instance2.colors);
instance2.sayName();   //Anna
instance2.sayAge();    //22

输出：

我们可以看一下，在修改color后，Subtype和Supertype上属性和方法的变化

我们再展开看subTpye中constructor的属性

这里一个地方要注意，sayAge函数是在Subtype.protopyte下声明的，所以他的与父构造函数下的name属在同一层，而sayName是Supertype.prototypr下声明的，所以在__proto__那层。

4.原型式继承

基本思想：不用严格意义上的构造函数，借助原型可以根据已有的对象创建新对象，还不必因此创建自定义类型，因此最初有如下函数：

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

从本质上讲，object()对传入其中的对象执行了一次浅复制

var person = {
    name:'Annika',
    friendes:['Alice','Joyce']
};
​
var anotherPerson = object(person);
anotherPerson.name = 'Greg';
yanotherPerson.friendes.push('Rob');
​
var yetAnotherPerson = object(person);
yetAnotherPerson.name = 'Linda';
yetAnotherPerson.friendes.push('Sophia');
​
console.log(person.friends);   //['Alice','Joyce','Rob','Sophia']

• 在这个例子中，实际上相当于创建了person的两个副本。
• ES5新增Object.create规范了原型式继承，接收两个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象，在传入一个参数的情况下，Object.create()和object()行为相同。

var person = {
    name:'Annika',
    friendes:['Alice','Joyce']
};
​
var anotherPerson = object.create(person,{
    name:{
        value:"Greg"
    }
});
​
\\用这种方法指定的任何属性都会覆盖掉原型对象上的同名属性
console.log(anotherPerson.name);   \\Greg

用处：创造两个相似的对象，但是包含引用类型的值的属性始终会共享响应的值

5.寄生式继承

基本思想：寄生式继承是与原型式继承紧密相关的一种思路，它创造一个仅用于封装继承过程的函数，在函数内部以某种方式增强对象，最后再返回对象。

function createAnother(original){
    \\通过调用函数创建一个新对象
    var clone = object(original);
    \\以某种方式来增强对象
    clone.sayHi = fuuction(){
        alert("Hi");
    };
    \\返回这个对象
    return clone
}

缺点：使用寄生式继承来为对象添加函数，会因为做不到函数复用而降低效率，这个与构造函数模式类似

6.寄生组合式继承

基本思想：通过借用构造函数来继承属性，通过原型链的混成形式来继承方法，不必为了指定子类型的原型而调用Supertype的构造函数，只需要Supertype的一个副本。本质上，就是使用寄生式继承来继承Supertype的原型，然后再将结果指定给子类型的原型

function inheritPrototype(Subtype,Supertype){
    var prototype = object(Supertype);   \\创建对象
    prototype.constructor = Subtype;     \\增强对象
    Subtype.prototype = prototype;       \\指定对象
}

因此，前面的例子可以改为如下的形式
function Supertype(name){
    this.name = name;
    this.colors = ["red","green","blue"];
}
​
Supertype.prototype.sayName = function(){
    console.log(this.name);
};
​
function Subtype(name,age){
    //继承属性
    Supertype.call(this,name);
    this.age  = age;
}
​
//继承方法
inheritPrototype(Subtype,Supertype);
​
Subtype.prototype.sayAge = function(){
    console.log(this.age);
};

优点：只调用了一次supertype构造函数，因此避免在subtype.prototype上创建不必要的，多余的属性，与此同时，原型链还能保持不变，还能正常使用instanceof 和isPrototypeOf()，因此，寄生组合式继承被认为是引用类型最理想的继承范式。

二、ES6继承详解

1.class的继承

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，如果不调用super方法，子类就得不到this对象。因此，只有调用super之后，才可以使用this关键字。

class Book {
  constructor(title,pages,discrib){
    this.title = title
    this.pages = pages
    this.discrib = discrib
  }
  printDiscrib(){
    console.log(this.discrib)
  }
}

class ITBook extends Book{
  constructor(title,pages,discrib,technology){
    super(title,pages,discrib)
    this.technology = technology
  }
  printTechnology(){
    console.log(this.technology);
  }
}

let jsBook = new ITBook('JS','200','666','JavaSCript')

输出：（会继承父类的属性和方法）

prototype 和__proto__
一个继承语句同时存在两条继承链：一条实现属性继承，一条实现方法的继承

class A extends B{}
A.__proto__ === B;  //继承属性
A.prototype.__proto__ == B.prototype;//继承方法