JavaScript 继承 知识点

继承

1.原型链

a.案例

// 创建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为Animal的实例。
Dog.prototype = new Animal();//为了拿到Animal.prototype里面的属性和方法：创建一个Animal的实例赋值给Dog.prototype，Dog.prototype就为Animal的实例。Animal的实例会指向animal.prototype，就取到Animal.prototype里面的属性和方法。

// 不建议使用Dog.prototype.__proto__=== Animal.prototype，因为双下划线的属性是js中的内部属性，各个浏览器兼容性不一，不建议直接操作属性，ES6中提供了操作属性的方法可以实现。
console.log(Dog.prototype.__proto__ === Animal.prototype );
// 在使用原型链继承的时候，要在继承之后再去原型对象上定义自己所需的属性和方法
Dog.prototype.getDogName = function () {
  console.log(this.name + 'getDogName');
}
var d1 = new Dog();//d1为Dog的实例，会指向Dog.prototype
d1.getAnimalName()
d1.getDogName()

d1(Dog的实例)  ->  Dog.prototype(Animal的实例)   ->    Animal.prototype
Dog.prototype 的 constructor 属性被重写为指向Animal，所以d1.constructor 也指向Animal

b.默认原型

实际上，原型链中还有一环。默认情况下，所有引用类型都继承自 Object，这也是通过原型链实现的。任何
函数的默认原型都是一个 Object 的实例，这意味着这个实例有一个内部指针指向Object.prototype。这也是
为什么自定义类型能够继承包括 toString()、valueOf()在内的所有默认方法的原因。因此前面的例子还有额外
一层继承关系。
Dog 继承 Animal，而 Animal 继承 Object。在调用 d1.toString()时，实际上调用的是保存在Object.prototype 上的方法。

c.原型与继承关系

instanceof 操作符:个实例的原型链中出现过相应的构造函数，则 instanceof 返回 true。
instanceof运算符用于检测构造函数的 `prototype` 属性是否出现在某个实例对象的原型链上。
console.log(d1 instanceof Object);  //true
console.log(d1 instanceof Animal);  //true
console.log(d1 instanceof Dog);     //true

isPrototypeOf()方法:原型链中包含这个原型，这个方法就返回 true：
console.log(Object.prototype.isPrototypeOf(d1)); // true
console.log(Animal.prototype.isPrototypeOf(d1)); // true
console.log(Dog.prototype.isPrototypeOf(d1)); // true

d.关于方法

子类有时候需要覆盖父类的方法，或者增加父类没有的方法。为此，这些方法必须在原型赋值之后再添加到原型上。来看下面的例子：
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();

e.原型链的破坏

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

f.原型链的问题

原型中包含的引用值会在所有实例间共享，这也是为什么属性通常会在构造函数中定义
而不会定义在原型上的原因。在使用原型实现继承时，原型实际上变成了另一个类型的实例。这意味着原先的
实例属性摇身一变成为了原型属性。
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' ]  相当于Dog.proototype.categorys
在这个例子中，Animal 构造函数定义了一个 categorys 属性，其中包含一个数组（引用值）。每个Animal 的
实例都会有自己的 categorys 属性，包含自己的数组。但是，当 Dog 通过原型继承Animal 后,Dog.prototype
变成了 Animal 的一个实例，因而也获得了自己的 categorys属性。这类似于创建了Dog.prototype.categorys
属性。最终结果是，Dog 的所有实例都会共享这个 categorys 属性。这一点通过d1.categorys 上的修改也能
反映到 d2.categorys上就可以看出来。
原型链的第二个问题是，子类型在实例化时不能给父类型的构造函数传参。事实上，我们无法在不影响所有对
象实例的情况下把参数传进父类的构造函数。再加上之前提到的原型中包含引用值的问题，就导致原型链基本
不会被单独使用。

2.经典继承

a.对象伪装”或“经典继承”

为了解决原型包含引用值导致的继承问题，一种叫作“盗用构造函数”（constructor stealing）的技术在开发社
区流行起来（这种技术有时也称作“对象伪装”或“经典继承”）。基本思路很简单：在子类构造函数中调用父类
构造函数。因为毕竟函数就是在特定上下文中执行代码的简单对象，所以可以使用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', 'dog' ]
结果就是每个实例都会有自己的 categorys 属性。

b.传递参数

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

b.经典继承函数的问题

经典继承函数的主要缺点，也是使用构造函数模式自定义类型的问题：必须在构造函数中定义方法，因此函数
不能重用。此外，子类也不能访问父类原型上定义的方法，因此所有类型只能使用构造函数模式。由于存在这
些问题，经典继承函数基本上也不能单独使用。
总结：
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