javascript代码实例教程-JavaScript原型递增陷阱

发布时间:2019-02-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript原型递增陷阱脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 不通过对象的constructor.PRototyPE对原型中的属性进行递增时候会触发原型递增陷阱。

 

本文通过一个Popup弹出框来解释陷阱的出现情况,并说明如何找到陷阱和解决问题。并且本文假设你至少简单了解JavaScript中的原型。

 

目录:

 

记录alert次数的弹出框

单实例调用

代码解释

弹出内容

添加一个实例

代码解释

弹出内容

debug

拆分bug

跳过陷阱

小结

相关阅读:JavaScript-构造函数

 

记录alert次数的弹出框

单实例调用

VAR Popup=function(){

}

Popup.prototype.alert=function(message){

    this.iMessageCount++;

    alert(message+'~alert过'+this.iMessageCount+'次');    

}

Popup.prototype.iMessageCount=0;

var oNimo=new Popup();

oNimo.alert('你好我是nimo!');//  alert 过1次

oNimo.alert('Nice to meet you,I am Nimo!');//  alert 过2次

代码解释

创建构造函数Popup

给Popup添加alert方法。弹出内容是消息加弹出次数,每次弹出递增iMessageCount属性。

添加公用属性iMessageCount用于记录弹出次数。

创建oNimo实例,并用ONimo弹出2次内容。

弹出内容

你好我是nimo!~alert过1次

Nice to meet you,I am Nimo!~alert过2次

目前看似一切正常,弹出内容和预计结果相同

 

添加一个实例

在上面的代码底部添加如下代码

 

var oDemo=new Popup();

oDemo.alert('我是demo!'); //alert过1次  

代码解释

创建oDemo实例,并用oDemo弹出2次内容。

弹出内容

我是demo!~alert过1次

oDemo的弹出结果应该是alert过3次,结果却是alert过1次

 

debug

遇到bug先将相关对象输出检查

 

console.LOG(oNimo);//Popup {iMessageCount: 2, alert: function, iMessageCount: 0}

console.log(oDemo);//Popup {iMessageCount: 1, alert: function, iMessageCount: 0}

打印结果后发现原型中iMessageCount属性并没有递增,依然是0。而oNimo和oDemo自身属性中却存储着iMessageCount属性,分别是2和1。说明this.iMessageCount++;递增的是对象自身属性并不是原型属性。

 

拆分bug

既然问题出在this.iMessageCount++;那么就对这行代码进行详细分析。

 

以下三行代码实际相等

 

this.iMessageCount++

this.iMessageCount=this.iMessageCount+1

this.iMessageCount=this.constructor.prototype.iMessageCount+1

解释

 

递增操作

iMessageCount属性等于iMessageCount属性+1

因为一开始对象自身并没有iMessageCount属性而原型中有,所有结果是将原型属性中的iMessageCount属性+1并赋值给对象自身属性中的iMessageCount属性。

知识点:对象访问一个属性会首先查找自身属性如果找不到自身属性就查找对象的constructor中的prototype中的属性(对象构造函数的原型中的属性)。

 

跳过陷阱

如需对原型中的属性进行递增操作请直接对对象的constructor中的protorype中的属性进行递增。

 

修复后的代码:

 

关键代码: this.constructor.prototype.iMessageCount++;

 

完整代码:

 

var Popup=function(){

}

Popup.prototype.alert=function(message){

    this.constructor.prototype.iMessageCount++;

    alert(message+'~alert过'+this.iMessageCount+'次');    

}

Popup.prototype.iMessageCount=0;

var oNimo=new Popup();

oNimo.alert('你好我是nimo!');//  alert 过1次

oNimo.alert('Nice to meet you,I am Nimo!');//  alert 过2次

 

var oDemo=new Popup();

oDemo.alert('我是demo!'); //alert过3次

小结

不通过对象的constructor.prototype对原型中的属性进行递增时候会触发原型递增陷阱。

如需对原型中的属性进行递增操作请直接对对象的constructor中的protorype中的属性进行递增。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript原型递增陷阱全部内容,希望文章能够帮你解决javascript代码实例教程-JavaScript原型递增陷阱所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。