javascript继承

1.原型链

ECMAScript 把原型链定义为 ECMAScript 的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。

原型链的基本构想：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例那么这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。

// 创建Animal
function Animal(){
    this.name='animal';
}
Animal.prototype.getAnimalName=function(){
    console.log(this.name+' animal');
}
// 创建Dog
function Dog(){
    this.name='dog';
}
// Dog继承自Animal 将Animal的实例赋值给Dog的原型对象，相当于将Animal的实例中的__proto__赋值给了Dog的原型对象
// Dog.prototype为Animal的一个实例，可以通过[[prototype]]即__proto__访问Animal原型对象中的属性和方法
Dog.prototype=new Animal();
console.log(Dog.prototype.__proto__===Animal.prototype);
// 在Dog中添加新方法 必须在原型赋值之后再添加到原型上
Dog.prototype.getDogName=function(){
    console.log(this.name+' dog');
}
var d1=new Dog();
// Dog的实例指向构造函数Animal
console.log(d1.constructor);// [Function: Animal]
// Dog的实例可以访问Animal的方法和自身的方法
d1.getAnimalName();
d1.getDogName();

1.1默认原型

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

1.2原型与继承的关系

原型与实例的关系可以通过两种方式来确定。

//instanceof运算符用于检测构造函数的 `prototype` 属性是否出现在某个实例对象的原型链上。
// 即判断一个变量是否某个对象的实例
console.log(d1 instanceof Object);  //true
console.log(d1 instanceof Animal);  //true
console.log(d1 instanceof Dog);     //true

// 原型链中的每个原型都可以调用这个方法，只要原型链中包含这个原型，这个方法就返回 true
console.log(Object.prototype.isPrototypeOf(d1)); // true 
console.log(Animal.prototype.isPrototypeOf(d1)); // true 
console.log(Dog.prototype.isPrototypeOf(d1)); // true

1.3原型链的破坏

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

// 继承
Dog.prototype = new Animal();
// Dog.prototype={};相当于Dog.prototype=new Object();
// 切断了Dog与Animal的连接，Dog是Object的一个实例而不是Animal的实例
Dog.prototype = {
  getDogName() {
    console.log(this.name);
  },
  someOtherMethod() {
    return false;
  }
};

1.4原型链的问题

原型链的主要问题出现在原型中包含引用值的时候。

function Animal() {
  this.categorys = ["cat", "rabbit"];
};
function Dog() {};

// Dog 继承自 Animal 
Dog.prototype = new Animal();

// 创建Dog的实例
var d1 = new Dog();
// 修改继承的属性
d1.categorys.push("dog");
console.log(d1.categorys); // [ 'cat', 'rabbit', 'dog' ]

// 创建Dog的实例
var d2 = new Dog();
// 继承到的属性不是原始值，而是被另一个实例修改后的值
console.log(d2.categorys); // [ 'cat', 'rabbit', 'dog' ]

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' ]

2.1传递参数

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

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

2.2经典继承函数的问题

经典继承函数的主要缺点，也是使用构造函数模式自定义类型的问题：必须在构造函数中定义方法，因此函数不能重用。此外，子类也不能访问父类原型上定义的方法，因此所有类型只能使用构造函数模式。

2.3对经典继承的总结

1.创建的实例并不是父类的实例，只是子类的实例。

2.没有拼接原型链，不能使用instanceof。因为子类的实例只继承了父类的实例属性/方法，没有继承父类的构造函数的原型对象中的属性/方法。

3.每个子类的实例都持有父类的实例方法的副本，浪费内存，影响性能，而且无法实现父类的实例方法的复用。

3.组合继承

组合继承（伪经典继承）综合了原型链和经典继承函数，将两者的优点集中了起来。

基本思路：使用原型链继承原型上的属性和方法，而通过经典继承函数继承实例属性。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。

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