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

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

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

原型链继承

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

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

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

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


【转】JavaScript图解继承(多图)
 现在,我们来设想一下,如果我们让构造函数B的原型对象等于另一个类型A的实例会发生什么?

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


【转】JavaScript图解继承(多图)
 如图二所示,构造函数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原型对象的指针。在图二中加入该继承层次,完整的继承链应如下图所示:


【转】JavaScript图解继承(多图)
 由此,便实现了对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层):


【转】JavaScript图解继承(多图)
 原因就是因为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会获得自己的属性副本:


【转】JavaScript图解继承(多图)
 我们将以上方法加入到原型链继承当中,注意代码中的注释部分:

代码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);

 代码执行结果:


【转】JavaScript图解继承(多图)
 
【转】JavaScript图解继承(多图)
 以上代码继承的结果如下图所示:


【转】JavaScript图解继承(多图)
 这样,每个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的原型对象。

这个过程比较抽象,请看以下图示:


【转】JavaScript图解继承(多图)
 我们主要修改的位置就是原型对象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);

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

相关推荐