JavaScript - 原型链与继承

前言：在JavaScript中，类的实现是基于原型继承机制，原型链是作为实现继承的主要方法。

构造函数、原型、实例

在讲JavaScript的继承之前，我们首先所要了解和知道的是构造函数、原型、实例三者之间的关系，大家可以看下下方代码：

function A(){
  this.name="A";
}
var B=new A();
A.prototype.constructor===A; //true
B.__proto__===A.prototype;  //true

通过上方代码，我们可以得出构造函数、原型、实例三者之间的三条结论，这三条结论是JavaScript中实现继承的理论基础，所以必须要记住
- 每个构造函数都有一个原型对象；
- 原型对象包含一个指向构造函数的指针；
- 实例都包含一个指向原型的内部指针。

原型链实现继承

在大家看了三者之间的关系后，我们再来思考一个问题，如果我们让原型对象等于另一个构造函数的实例，结果会如何呢？请看下方代码：

  function C() {
    this.person = {
      name: "张三",
      age: 24,
    };
  }
  function A() {
  }

  A.prototype = new C();
  var B = new A();

  C.prototype.constructor === C;//true
  //① true C的原型对象有一个指向构造函数C的指针

  A.prototype.constructor === A;
  //② fasle A的原型对象被重写指向了C的实例，所以为false，

  A.prototype.__proto__ === C.prototype;
  //③ true A的原型对象是C的实例，而C的实例有一个指向C的原型的指针，所以A的原型对象一个指针指向C的原型对象

  B.__proto__ === A.prototype;
  //④ true B是A的实例，所以B有一个指向A的原型的指针

  B.__proto__.__proto__ === C.prototype;
  //⑤ true 由③、④可推导出 

  B.__proto__.__proto__.constructor === C
  //⑥ true 由①、⑤可推导出

可能大家看到上面的这些觉得有点绕，但是还是希望大家能静下心来看一遍，对照着前面的三个理论基础来看，其实这就像数学上的一些逻辑推理公式，当你知道一些原理和公式之后，你就能推导出各种复杂的关系。类似于若是C的原型又是构造函数D的实例，那么上述的关系依然层层递进，就构成了实例与原型的链条，这就是所谓原型链的基本概念。
但是只是通过原型链来实现继承，还是不行的，因为它也存在了一个关键问题：

• 引用类型值的原型属性会被所有实例共享，而这也是为什么我们最推荐使用构造函数+原型模式去创建对象的原因，在构造函数中定义属性，在原型中定义共享的方法。当我们使用原型来实现继承时，原型实际上回变成另一个类型的实例，所以在上述代码中，A的原型是C的实例，所以自然C的person属性变成了A的原型属性，这样就会造成了下方的问题，我们继续上方的代码，我们再创建了一个A的实例D，这时候修改了A的另外一个实例B的person.name,然后发现D的person.name也跟着发生了变化，因为B和D的person属性都是通过指针指向了A的原型对象的person属性，而person属性是引用类型，所以这个属性是共享的。

  var D = new A();
  B.person.name = "李四";
  console.log(D.person)
  D.person.name === "李四" //true

借用构造函数实现继承

上面我们讲了只通过原型链来实现继承所存在的引用类型值带来的的问题，那么有没有方法来规避解决这个问题呢？当然有，这就时要借用构造函数，有时候也被叫做伪造对象或经典继承。其实思路也很简单，就是在子类型的构造函数内部调用超类型构造函数，其实也就是说在子类型的的构造函数中调用call()和apply()。修改下上方的代码，我们在子类型A中调用call方法继承C，这样将来在创建A的实例B和D的时候，都会去执行构造函数A创建了一个person属性的副本。代码如下：

  function C() {
    this.person = {
      name: "张三",
      age: 24,
    };
  }
  function A() {
    C.call(this);
  }

  A.prototype = new C();
  var B = new A();
  var D = new A();
  B.person.name = "李四";
  D.person.name === "张三" //true

通过构造函数的方式我们就可以解决原型链来实现继承所存在的引用类型值带来的的问题，A的实例B和D的person属性是两个不同的副本，他们的指针不是指向同一个对象，不会产生实例属性的共享问题。但是同样，B和D的方法也是不同的副本，无法实现函数的复用，也比较消耗内存空间，这跟使用构造函数去创建对象的问题是一样的。

借用构造函数+原型链实现继承

看到这里，我们肯定想到了跟创建对象一样，去使用构造函数和原型相结合的方式去实现继承，这样既能通过在原型上定义方法实现函数的复用，又能保证每个实例都拥有自己的属性，其背后的思路就是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承，直接上代码：

  function C(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  C.prototype.sayName = function () {
    alert(this.name);
  }

  function A(name, age) {
    C.call(this, name);
    this.age = age;
  }
  A.prototype = new C();
  A.prototype.sayAge = function () {
    alert(this.age);
  }

  var B = new A("张三", 25);
  B.colors.push("black");
  alert(B.colors);// red,blue,green,black
  B.sayName(); //张三
  B.sayAge(); //25

  var D = new A("李四", 30);
  alert(D.colors);//red,blue,green
  D.sayName(); //李四
  D.sayAge(); //30

借用构造函数+原型链实现继承是JavaScript中最常用的继承模式，避免了原型链和借用构造函数的缺陷，融合它们的优点。

小结：

JavaScript 主要通过原型链实现继承。原型链的构建是通过将一个类型的实例赋值给另一个构造函
数的原型实现的。这样，子类型就能够访问超类型的所有属性和方法，这一点与基于类的继承很相似。
原型链的问题是对象实例共享所有继承的属性和方法，因此不适宜单独使用。解决这个问题的技术是借
用构造函数，即在子类型构造函数的内部调用超类型构造函数。这样就可以做到每个实例都具有自己的
属性，同时还能保证只使用构造函数模式来定义类型。使用最多的继承模式是组合继承，这种模式使用
原型链继承共享的属性和方法，而通过借用构造函数继承实例属性。