JavaScript图解继承(多图)

原创 2016年04月08日 13:47:54

在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,实质上所有函数的默认原型都是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的原型对象继承而来
alert("b1.peers : " + b1.peers + "\n" + "a1.peers : " + a1.peers);  //对B中引用属性的修改没有改变实例A中的属性

代码执行结果:

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


图六

这样,每个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);

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a153375250/article/details/51095976

js树状图,分类表,<em>继承关系</em>

一张图,js的表示了<em>继承关系</em>,引用关系。。。... 下载 &gt; 开发技术 &gt; <em>Javascript</em> &gt; js树状图,分类表,...一张图,js的表示了<em>继承关系</em>,引用关系。。。综合评分:1 ...
  • 2018年04月13日 00:00

JavaScript对象原型继承关系图

  • Seasand2014
  • Seasand2014
  • 2016-07-06 23:24:28
  • 227

[js高手之路]从原型链开始图解继承到组合继承的产生

于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一、把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 ...
  • ma524654165
  • ma524654165
  • 2017-08-28 09:33:26
  • 152

C# 继承图解

图解继承using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst...
  • q269399361
  • q269399361
  • 2016-08-03 15:26:01
  • 422

javascript中继承(一)-----原型链继承的个人理解

【寒暄】好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解。 总的...
  • ladycode
  • ladycode
  • 2016-04-29 15:51:57
  • 3772

JavaScript如何实现面向对象和继承机制?

JavaScript实现面向对象?  function MyObject() {    this.name="myobject";    this.type="class";    this.meth...
  • u012575451
  • u012575451
  • 2016-10-02 13:23:23
  • 821

继承关系的内存图解

  • u013905744
  • u013905744
  • 2015-03-16 10:49:54
  • 266

宋牧春: 多图详解Linux内存分配器slub

本文目录:1. 前言2. slub数据结构3. slub数据结构之间关系4. slub分配内存原理5. slub释放内存原理6. kmalloc作者简介:宋牧春,linux内核爱好者,2017年6月本...
  • juS3Ve
  • juS3Ve
  • 2018-01-20 00:00:00
  • 285

浅析Javascript原型继承

JS没有提供所谓的类继承,据说在2.0中要加入这种继承方式,但是要所有浏览器都实现2.0的特性那肯定又得N多年。昨天看了crockford的一个视频,里面讲解了一下JS的继承方式,按照PPT里面说的,...
  • kittyjie
  • kittyjie
  • 2009-07-26 09:30:00
  • 14173

JS实现继承的几种方式详述(推荐)

ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的。 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。构造函数的模式实现继承,但是会导致函数...
  • liuyan19891230
  • liuyan19891230
  • 2016-03-01 17:50:26
  • 7948
收藏助手
不良信息举报
您举报文章:JavaScript图解继承(多图)
举报原因:
原因补充:

(最多只允许输入30个字)