博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript --- 继承初探七日谈 (一)
阅读量:4982 次
发布时间:2019-06-12

本文共 1961 字,大约阅读时间需要 6 分钟。

原型链是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();  //25

 尽管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;  // truemy instance of his;  // truemy instance of people;  // true

 

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

her.prototype,isPrototypeOf (my); // truehis.prototype,isPrototypeOf (my); // truepeople.prototype,isPrototypeOf (my); // true

 

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

转载于:https://www.cnblogs.com/beyond-succeed/p/5820976.html

你可能感兴趣的文章
[批处理]批量将文件名更名为其上级目录名
查看>>
如何查找ORACLE中的跟踪文件
查看>>
SQL Server将一列的多行内容拼接成一行
查看>>
Spring Controller RequestMapping
查看>>
socket
查看>>
小程序 跳转问题 (来源见注明)
查看>>
JBPM4入门——9.自动节点单线执行
查看>>
//停止关联的进程
查看>>
SQL 生成公曆和農曆對照數據,公曆查找農曆和農曆查找公曆函數
查看>>
为何场效应管要用UGD与UGS(off)来比较判断夹断情况?
查看>>
.pem证书转xml格式字符串(.net)
查看>>
js构建ui的统一异常处理方案(二)
查看>>
三线程连续打印ABC
查看>>
ECharts
查看>>
初识网络爬虫
查看>>
git push 时不用每次都输入密码的方法
查看>>
54点提高PHP编程效率 引入缓存机制提升性能
查看>>
编解码-marshalling
查看>>
CDN原理
查看>>
java.lang.outofmemoryerror android
查看>>