JavaScript 中的继承

1.面向对象语言支持的继承种类：接口继承和实现继承。
2.接口继承只继承方法签名，实现继承继承实际的方法。
3.接口继承在 ECMAScript 中是不可能的，因为函数没有签名。实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的。

原型链继承

基本思想：通过原型继承多个引用类型的属性和方法。
每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。

// 创建Animal
function Animal() {
  this.name = 'animal';
}
Animal.prototype.getAnimalName = function () {
  console.log(this.name + 'getAnimalName');
}
// 创建Dog
function Dog() {
  this.name = 'dog';
}
// Dog继承自Animal  将Animal的实例赋值给Dog的原型对象，相当于将Animal的实例中的__proto__赋值给了Dog的原型对象
// 如此 Dog原型对象 就能通过 Animal 对象的实例中的[[prototype]](__proto__) 来访问到 Animal原型对象 中的属性和方法了。
Dog.prototype = new Animal();
// 不建议使用Dog.prototype.__proto__=== Animal.prototype，因为双下划线的属性是js中的内部属性，各个浏览器兼容性不一，不建议直接操作属性，ES6中提供了操作属性的方法可以实现。
console.log(Dog.prototype.__proto__ === Animal.prototype ); //true
// 在使用原型链继承的时候，要在继承之后再去原型对象上定义自己所需的属性和方法
Dog.prototype.getDogName = function () {
  console.log(this.name + 'getDogName');
}
var d1 = new Dog();
d1.getAnimalName()  //doggetAnimalName
d1.getDogName()  //doggetDogName

从上述案例来看， Dog 没有使用默认原型，而是将其替换成了一个新的对象。这个新的对象恰好是 Animal 的实例。这样Dog的实例不仅能从 Animal 的实例中继承属性和方法，而且还与 Animal 的原型挂上了钩。Dog.prototype作为Animal的实例通过内部的[[Prototype]]指向Animal.prototype，Dog.prototype就继承了Animal.prototype的属性和方法。

默认原型

默认情况下，所有引用类型都继承自 Object，这也是通过原型链实现的。任何函数的默认原型都是一个 Object的实例，这意味着这个实例有一个内部指针指向Object.prototype。这也是为什么自定义类型能够继承包括toString()、valueOf()在内的所有默认方法的原因。

原型于继承的关系

原型与实例的关系可以通过两种方式来确定:1.使用 instanceof 操作符；2.使用 isPrototypeOf()方法。

// '父'类
function Animal(){
    this.name='animal'
}
Animal.prototype.getAnimalName=function(){
    console.log(this.name);
}
// '子'类
function Dog(){
    this.name='dog'
}
// Dog继承于Animal
Dog.prototype=new Animal();
Dog.prototype.getDogName=function(){
    console.log(this.name);
}
var d1=new Dog();
d1.getAnimalName();
d1.getDogName();
// 使用instanceof进行一个验证
console.log(d1 instanceof Object); //true
console.log(d1 instanceof Animal); //true
console.log(d1 instanceof Dog); //true
// isPrototypeof()
console.log(Object.prototype.isPrototypeOf(d1)); // true 
console.log(Animal.prototype.isPrototypeOf(d1)); // true 
console.log(Dog.prototype.isPrototypeOf(d1)); // true

关于方法

子类有时候需要覆盖父类的方法，或者增加父类没有的方法。

function Animal() {
  this.name = 'animal';
}
Animal.prototype.getAnimalName = function () {
  console.log(this.name + 'getAnimalName');
}
// 创建Animal的实例
var a1 = new Animal()
a1.getAnimalName(); //animalgetAnimalName
function Dog() {
  this.name = 'dog';
}
Dog.prototype = new Animal();
// 新方法
Dog.prototype.getDogName = function () {
  console.log(this.name + 'getDogName');
}
// 覆盖父类已有的方法
Dog.prototype.getAnimalName = function () {
  console.log('我覆盖了父类的方法');
}
var d1 = new Dog();
d1.getAnimalName(); // 我覆盖了父类的方法
d1.getDogName();

原型链的破坏

以对象字面量方式创建原型方法会破坏之前的原型链，因为这相当于重写了原型链。

function Animal() {
  this.name = 'animal';
}
Animal.prototype.getAnimalName = function () {
  console.log(this.name);
};
function Dog() {
  this.name = 'dog';
}
// 继承
Dog.prototype = new Animal()
//在这段代码中，子类的原型在被赋值为 Animal 的实例后，又被一个对象字面量覆盖了。
//覆盖后的原型是一个 Object 的实例，而不再是Animal 的实例。
//因此之前的原型链就断了。Dog和 Animal 之间也没有关系了。
//相当于：Dog.prototype=new Object()
Dog.prototype = {
  getDogName() {
    console.log(this.name);
  },
  someOtherMethod() {
    return false;
  }
};
var d1 = new Dog();
d1.getAnimalName(); // 出错！

原型链的问题

在原型中包含引用值的时候，原型中包含的引用值会在所有实例间共享，在使用原型实现继承时，原型实际上变成了另一个类型的实例。这意味着原先的实例属性摇身一变成为了原型属性。

function Animal() {
  this.categorys = ["cat", "rabbit"];
}
function Dog() { }
// 继承 Animal 
Dog.prototype = new Animal();
var d1 = new Dog();
d1.categorys.push("dog");
console.log(d1.categorys); // [ 'cat', 'rabbit', 'dog' ]
var d2 = new Dog();
console.log(d2.categorys); // [ 'cat', 'rabbit', 'dog' ]

总结

原型链继承的优点：
通过原型链继承的方式，原先存在父类型的实例中的所有属性和方法，现在也能存在于子类型的原型中了。

原型链继承的缺点：
1.在原型中包含引用值的时候，原型中包含的引用值会在所有实例间共享，在使用原型实现继承时，原型实际上变成了另一个类型的实例，原先的实例属性变成了原型属性。
2.在创建子类型的实例时，没有办法在不影响所有实例的情况下，向父类型的构造函数传递参数。

经典继承

基本思路：在子类构造函数中调用父类构造函数。可以使用apply()和 call()方法以新创建的对象为上下文执行构造函数。

function Animal() {
  this.categorys = ["cat", "rabbit"];
}
function Dog() {
  // 继承 Animal 
  Animal.call(this);
}
// 在var d1 = new Dog()时，是d1调用Dog构造函数，所以其内部this的值指向的是d1,
//所以Animal.call(this)就相当于Animal.call(d1)，就相当于d1.Animal()。
//最后，d1去调用Animal方法时,Animal内部的this指向就指向了d1。
//那么Animal内部this上的所有属性和方法，都被拷贝到了d1上。
//所以，每个实例都具有自己的categorys属性副本。他们互不影响。
var d1 = new Dog();
d1.categorys.push("dog");
console.log(d1.categorys); // [ 'cat', 'rabbit', 'dog' ]
var d2 = new Dog();
console.log(d2.categorys); // [ 'cat', 'rabbit']

传递参数

function Animal(name) {
  this.name = name;
}
function Dog() {
  // 继承 Animal 并传参
  Animal.call(this, "zhangsan");
  // 实例属性
  this.age = 29;
}
var d = new Dog();
console.log(d.name); // zhangsan
console.log(d.age); // 29

总结

经典继承的优点：可以在子类构造函数中向父类构造函数传参。

经典继承的缺点：
1.创建的实例并不是父类的实例，只是子类的实例。
2.没有拼接原型链，不能使用instanceof。因为子类的实例只继承了父类的实例属性/方法，没有继承父类的构造函数的原型对象中的属性/方法。
3.每个子类的实例都持有父类的实例方法的副本，浪费内存，影响性能，而且无法实现父类的实例方法的复用。

组合继承

基本的思路：使用原型链继承原型上的属性和方法，而通过经典继承函数继承实例属性。
优点：这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。也保留了 instanceof 操作符和 isPrototypeOf()方法识别合成对象的能力。

function Animal(name) {
  this.name = name;
  this.categorys = ["cat", "rabbit"];
}
Animal.prototype.sayName = function () {
  console.log(this.name);
};
function Dog(name, age) {
  // 继承属性
  Animal.call(this, name);
  this.age = age;
}
// 继承方法
Dog.prototype = new Animal();
Dog.prototype.sayAge = function () {
  console.log(this.age);
};
var d1 = new Dog("zhangsan", 29);
d1.categorys.push("dog");
console.log(d1.categorys); // [ 'cat', 'rabbit', 'dog' ]
d1.sayName(); // zhangsan
d1.sayAge(); // 29 
var d2 = new Dog("lisi", 27);
console.log(d2.categorys); // [ 'cat', 'rabbit' ]
d2.sayName(); // lisi
d2.sayAge(); // 27