JavaScript图解继承(多图)

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

原型链继承

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

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

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

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

图一

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

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

图二

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

代码1

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，实质上所有函数的默认原型都是Objec