原型链是javascript实现继承的默认方式。下面来一个例子看一下她的魔法吧:

首先定义三个构造函数:

function her(){
    this.name = 'Anna';
    this.toString = function(){
        return this.name;
    }
}

function his(){
    this.sex = 'men';
}

function pepole(side, height){
    this.name = 'Jock';
    this.side = side;
    this.height = 'height';
    this.setArea = function(){
        return this.side * this.height / 2;
    }
}

接下来就是我们施展继承的魔法了:

his.prototype = new her();
pepole.prototype = new his();

发生了神马呢?在这里我们直接将对象创建在his对象的prtotype属性中,并没与去扩展这些对象的原有原型。也就是说,我们用构造函数her()创建的实例对象,用她去覆盖his构造函数的prototype属性。相同pepole也是一样,她的构造器属性prototype完全是his()通过创建实例重建的。

切记:javascript是一个完全依靠对象的语言,其中没有类的概念。因此我们需要构造一个实体new her(),然后通过实体的属性才能完成相关的继承工作,而不能直接继承her()构造函数,另外,这也确保了在继承实现以后,对her()再做任何修改,删除,添加,都不会对his()造成任何影响,因为我们所继承的不过是她所创建的一个实体。

正如上回所讲,我们对对象的prototype进行完全替换的时候(不同于向里面添加属性),与可能回对constonctor属性产生一定的副作用。

在我们完成继承相关工作之后,因该对这些对象的constructon属性进行相应的重置,这是一个非常好的习惯。

his.prototype.constructor = his;
people.prototype.constructor = people;

我们来测试一下目前实现的内容:

var my = new pepole(5,10);
my.setArea();  

尽管my没有属于自己的toString()方法,但是我们仍然可以调用她继承来的toString()方法,虽然这里调用的是一个继承的方法,但她的this仍然指向my对象。

my.toString(); // Jock

下面我们来关注一下javascript在my.toString()被调用时究竟发生了那些事情?

  1. 首先她会遍历my对象的所有属性和方法,但没有找到一个叫做toString()的方法。

  2. 接着去查看my._proto_所指的对象,也就是在继承过程中由new his()所创建的实体对象。

  3. 显然,javascript引擎在遍历people()实体的时候仍然不会找到toString()这个方法,然后又会检查该实体的_proto_属性,这时候该属性又会指向new her()所创建的实体对象.

  4. 最终,在new her()所创建的实体中找到了toString()方法。

  5. 最后, 该方法就会在my被调用,并且this也指向了my。

那么问题来了?my对象的构造函数是哪一个?

因为我们在构建继承关系时已经对相应的constructor属性进行了重置:

my.constructor === people; // true

通过instanceof操作符,我们可以验证my对象是以上三个构造函数的实例:

my instance of her;  // true
my instance of his;  // true
my instance of people;  // true

同样的,我们调用构造函数原型的isPropertypeOf()方法时结果也是如此:

her.prototype,isPrototypeOf (my); // true
his.prototype,isPrototypeOf (my); // true
people.prototype,isPrototypeOf (my); // true

我们同样可以用其他构造函数创建对象,她们同样可以获取her()的toString()方法。

javascript --- 继承初探七日谈 (一)的更多相关文章

  1. javascript --- 原型初探七日谈(一)

    在javascript中,像原型,闭包这样的概念,只要我们能领悟其中的原理,一切都会显得格外清晰与明了. 原型属性(prototype): 下面我们简单定义一个函数 function her(a, b ...

  2. javascript --- 原型初探七日谈(二)

    扩展内建对象: 在javascript中,内建对象的构造函数都是可以通过其原型来进行扩展的.这意味着我们可以做一些事情,例如我们要往数组原型中添加一个新方法,就可以在其所有的数组中使用,下面我们来试试 ...

  3. javascript --- 原型初探七日谈(三)

    原型陷阱: 在处理原型问题上时,我们要注意两种行为. 1. 当我们对原型对象执行完全替换的时候,有可能会触发原型链的某种异常. 2. prototype.constructor 属性是不可靠的. 下面 ...

  4. javascript继承的三种模式

    javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...

  5. javascript继承机制的设计思想(ryf)

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...

  6. 【读书笔记】javascript 继承

    在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行. 让Brid 继承 Animal,并扩展自己fly的方法. func ...

  7. 图解JavaScript 继承

    JavaScript作为一个面向对象语言,可以实现继承是必不可少的,但是由于本身并没有类的概念(不知道这样说是否严谨,但在js中一切都类皆是对象模拟)所以在JavaScript中的继承也区别于其他的面 ...

  8. JavaScript强化教程——Cocos2d-JS中JavaScript继承

    javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...

  9. [原创]JavaScript继承详解

    原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

随机推荐

  1. MVC5+EF6简单实例---以原有SQLServer数据库两表联合查询为例

    有二三年没写代码了,**内的工作就是这样,容易废人!看到园子里这么多大侠朝气蓬勃的,我想也要学点东西并和大家分享,共同进步!快乐每一天,进步每一天!言归正传! 通过最近一段时间对MVC5.EF6的学习 ...

  2. 【转】你真的理解Python中MRO算法吗?

    你真的理解Python中MRO算法吗? MRO(Method Resolution Order):方法解析顺序. Python语言包含了很多优秀的特性,其中多重继承就是其中之一,但是多重继承会引发很多 ...

  3. MAT内存问题分析定位

    MAT内存问题分析定位 1.下载安装MemoryAnalyzer工具. 2.使用DDMS将对应线程的内存日志导出来后,使用hprof-conv工具进行转换,用MAT打开转换后的hprof文件.

  4. HTML标签CSS默认值研究

    最近写css的时候,发现在div元素里面添加ul元素后发现,ul列表在div里面距离最上方总是有一段空行,当时很奇怪,以为是哪个css出了问题,就把css去掉了,发现问题依旧,然后就查了一下发现htm ...

  5. 基于bootstrap分页

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. ios SourceTree中添加git项目工程文件

    1.创建远程git仓库 2.复制远程仓库地址,最好选择http的地址. 3.在自己的电脑上下载一个SourceTree,然后在自己的电脑上建立链接. 点击左上角的+号桶开始添加,弄好点击Clone 4 ...

  7. [z]vs中无法加入断点进行调试的解决方案

    http://blog.chinaunix.net/uid-15464162-id-3799069.html [ 1] 以前也遇到过同样的问题,但没有问个为什么,也没有探个毕竟.昨天调试一个DLL,添 ...

  8. IT公司笔试题(一)

    1.  已知一个递归算法的算法复杂度计算公式为T(n) = T(n/2) + n,则T(n)的算法复杂度为多少? 解:O(n) T(n) = T(n/2) + n = T(n/4) + n/2 + n ...

  9. css文本属性

    CSS1&2中的文本属性 属性 版本 简介 text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  10. php中or的含义

    or其实是Php中的短路或 经常看到这样的语句: $file = fopen($filename, r) or die("抱歉,无法打开: $filename"); or在这里是这 ...