【转】JavaScript图解继承(多图)

转自：http://www.2cto.com/kf/201604/498730.html

 

在JavaScript中，继承主要是通过原型链来实现的。原型链和前文所说的原型对象密切相关。原型对象可以参考JavaScript构造函数和原型对象。为了彻底搞清楚JavaScript的继承，我们先搞清楚原型链是什么。

原型链继承

我们知道，所有的引用类型都默认继承了Object，因而所有自定义类型都拥有toString()、valueOf等默认方法。我们只是知道这个结论，但现在我们更感兴趣的是这个继承关系究竟是如何实现的。

我们先来回顾一下构造函数，原型对象和实例的关系：

每个构造函数都有一个原型对象，并包含指向原型对象的指针； 每个原型对象都包含一个指向构造函数的指针； 每个实例内部都有一个指向原型对象的指针；

大概可以用以下的关系图来描述：

 现在，我们来设想一下，如果我们让构造函数B的原型对象等于另一个类型A的实例会发生什么？

上面说了，每个实例中都含有一个指向原型对象的指针。相应地，如果让构造函数B的原型对象等于实例A，这个指针便会存在于构造函数B的原型对象中，指向A的原型对象，我们用图二表示这种关系：

 如图二所示，构造函数B的原型对象被重写为A的实例，则原本存在于A实例中的所有属性以及方法都会存在于构造函数B的原型对象中。这样我们便可以通过prototype的索引查询到原本存在于类型A中的属性和方法了。由此便可实现对A的继承！我们不妨看一个例子：

function ConsA(name) {
  this.name = name;
}
 
ConsA.prototype.alertName = function() {
  alert(this.name);
}
 
function ConsB(name) {
  this.name = name;
}
 
//通过将构造函数ConsB的原型对象指定位A的一个实例实现继承
var a1 = new ConsA("A");
ConsB.prototype = new a1;
 
var b1 = new ConsB("B");
 
a1.alertName();  //A
b1.alertName();  //B

 以上代码首先创建一个构造函数ConsA，然后在该构造函数的原型对象中添加一个alertName()方法。

接着创建构造函数ConsB，然后通过将构造函数ConsB的原型对象指定为A的一个实例实现对A的继承。

分别创建实例a1以及b1，我们可以看到b1继承了ConsA原型对象中的alertName()方法。

新创建的实例B中包含指向原型对象B的指针，实质是指向一个A实例。实例A中包含一个指向A的原型对象的指针，则原型对象B中也包含一个指向原型对象A的指针。如果原型对象A又是另一类型的实例，这样层层递进，就形成了实例、原型的链条——原型链。

JS中的继承主要就是依靠原型链来实现的。所谓所有引用类型都默认继承了Object，实质上所有函数的默认原型都是Object实例，该实例中包含一个指向Object原型对象的指针。在图二中加入该继承层次，完整的继承链应如下图所示：

 由此，便实现了对Object的默认继承。

当实例B需要调用valueOf()方法时。首先会在实例B中搜索是否存在该实例方法，不存在；通过[[prototype]]到原型对象B中继续搜索，不存在；再通过[[prototype]]到原型对象A中搜索，不存在；继续沿着原型链到Object原型对象中搜索，存在。如果一直未找到需要的属性或方法，会沿着原型链一直搜索下去，直到最后一层！

使用原型链继承的尴尬

在JavaScript构造函数和原型对象中已经说过，使用原型对象在数据共享方面有得天独厚的优势。然而正是这种优势有的时候也会成为劣势，问题就在于，很多时候，我们并不希望所有的属性都被共享，尤其对于引用类型的属性。

假设实例A中拥有一个数组变量

nums = ['1', '2', '3'];

 构造函数B在继承实例A时会将该变量也添加在构造函数B的原型对象中，那么我们在对实例B继承的nums进行操作的时候，如insB.nums.push("4")，这个修改同样会导致实例A的nums被篡改掉，也就会导致所有B类型实例中的nums值发生改变！如下图蓝色部分所示(省略了原型链中Object层)：

 原因就是因为nums是一个引用类型的变量，他们都是指向同一块内存位置的指针。

特别注意！以上将原型对象B和实例A分开画成两个部分是便于直观理解，实质上他们是对同一块内存的引用。

借用构造函数改进原型链继承

我们曾经说过，构造函数和普通函数没有什么本质的区别。区别就在于调用方式，如果对一个所谓的普通函数使用new来调用，那么这个函数就是构造函数；对所谓的构造函数不使用new来调用，它就是普通函数。函数只不过是在特定环境中执行代码的对象，我们假设有如下构造函数A：

function ConsA(name, peers) {
    this.name = name;
    this.peers = peers;
}

 我们用如下的方式，在构造函数B中调用ConsA：

function ConsB(name, peers, age) {
  ConsA.call(this, name, peers);
  this.age = age;
}

 这里没有使用new操作符，实质上就相当于在ConsB的环境中将普通函数ConsA的代码执行了一遍。由此在调用构造函数ConsB创建B实例的时候，每个实例都会获得name，peers副本作为自己的实例属性，例如当执行insB = new ConsB("B", ['1', '2', '3'], 20);时，insB会获得自己的属性副本：

 我们将以上方法加入到原型链继承当中，注意代码中的注释部分：

代码2

function ConsA(name, peers) {
  this.name = name;
  this.peers = peers;
}
 
ConsA.prototype.alertName = function() {
  alert(this.name);
}
 
function ConsB(name, peers, age) {
  ConsA.call(this, name, peers);
  this.age = age;
}
 
//这里先创建一个A的实例a1再将该实例赋给ConsB的prototype
var a1 = new ConsA("A", ["1", "2", "3"]);
ConsB.prototype = a1;
 
//创建B的实例b1然后在b1的引用属性peers中添加新值"4"
var b1 = new ConsB("B", ["1", "2", "3"], 20);
b1.peers.push("4");
 
b1.alertName();  //该方法从A的原型对象继承而来
//对B中引用属性的修改没有改变实例A中的属性
alert("b1.peers : " + b1.peers + "\n" + "a1.peers : " + a1.peers);  

 代码执行结果：

 

 以上代码继承的结果如下图所示：

 这样，每个B实例都获得了一份A的属性副本作为自己的实例属性。该属性也就屏蔽掉了原型对象中的同名属性。各个实例拥有自己的副本，对数据的操作彼此之间互不影响。解决了属性共享方面的尴尬。

构造函数+原型链继承的赘余与改进方法

在借用构造函数和原型链组合继承的方法中，我们通过构造函数继承属性，通过原型继承方法。方法可以共享；对于属性，每个实例都拥有一份自己的副本互不干扰。看起来已经高枕无忧，但是我们仔细观察图六。不难发现A的属性不仅在实例B中创建了一份，在B的原型中也创建了一份！我们只不过是使用同名的属性将原型对象B中的属性覆盖掉了。但是它们依然是存在的。这显然是多余的。

事实上，我们使用原型对象是想继承A类型的方法，A类型的方法存在于A的原型对象中，因此我们真正需要的不过是原型对象A的一个副本而已！既然如此，何必指定一个A的实例对象作为原型对象呢？

我们不妨这样做，创建A原型对象的一份副本，对其做一定的修改，保持原型链不变。然后将其指定为B的原型对象以实现方法的继承。

以下方法由道格拉斯·克罗克福德提出推广。

首先创建一个基于已有对象创建新对象的函数：

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

 借用这个函数，我们来创建另外一个函数，实现一个构造B对另一个构造A的原型对象的继承，并保持原型链不变：

fucntion inheritPrototype(B, A) {
  var o = object(A.prototype);
  o.constructor = B;
  B.prototype = o;
}

 以上代码很简单，信息量还是很丰富的。

首先，第二行，借用我们上面的object()函数，创建了一个基于A的原型对象的对象副本。什么意思呢？就是创建了一个对象，并将这个对象的原型对象指定为A的原型对象。然后把这个对象赋值给局部变量o。 第三行，将利用object()函数返回的对象o的constructor指回B。 第四行，将调整好的o指定为B的原型对象。

这个过程比较抽象，请看以下图示：

 我们主要修改的位置就是原型对象B，我们相当于创建了一个空的构造函数，将其原型对象指向A的原型对象。然后创建该构造函数的实例作为原型对象B。这样就省去了在原型对象B中包含一大堆A中属性的赘余。得到了漂亮的继承。

利用以上方法改进代码2如下：

代码3

function ConsA(name, peers) {
  this.name = name;
  this.peers = peers;
}
 
ConsA.prototype.alertName = function() {
  alert(this.name);
}
 
function ConsB(name, peers, age) {
  ConsA.call(this, name, peers);
  this.age = age;
}
 
inheritPrototype(ConsB, ConsA);
 
//创建B的实例b1
var b1 = new ConsB("B", ["1", "2", "3"], 20);

 至此，继承已经算是十分理想了。^_^