JavaScript – “this”的所有者
我跟着一个教程来创build一个JavaScript秒表,并试图扩展它与多个秒表(一个类的多个实例)的工作。 我的问题是,当我试图显示当前值,而时钟滴答作响我需要硬编码的类实例,因为使用“这个”不起作用(在我使用console.log)。 我已经把代码降到了最低限度,试图理解这个方面,并粘贴了下面的内容:
function Timer(){ var time1 = null; var time2 = null; var timeLoop = null; function getTime(){ var day = new Date(); return day.getTime(); } this.start = function(){ time1 = getTime(); timeLoop = setInterval(function(){ time2 = getTime(); console.log(_Timer.duration()); //console.log(this.duration()); },500); } this.duration = function(){ return (time1 - time2) / 1000; } }
我认为下面的链接描述了我的问题,但我不明白这个在这里应用。 问题是由于所有者this.start,而不仅仅是这个,我怎么能修改代码,使其工作与任何实例的计时器?
http://www.quirksmode.org/js/this.html
我已经包括硬编码价值线和“这”行不起作用。
谢谢,
杰兰特
如果你想让this
属性保持一致,你应该绑定被调用的函数。
例如,
setInterval(function() { /* code here */ }.bind(this), 500)
这样,内部函数的this
和外部函数的一样。
每当你看到function
你可以假设this
变化的值,所以在这个间隔的callback函数里面, this
实际上是window
,而不是对象。
简单的解决scheme是将其存储在一个variables中
function Timer(){ var time1 = null; var time2 = null; var timeLoop = null; function getTime(){ var day = new Date(); return day.getTime(); } this.start = function(){ var self = this; time1 = getTime(); timeLoop = setInterval(function(){ time2 = getTime(); console.log(self.duration()); },500); } this.duration = function(){ return (time1 - time2) / 1000; } }
this
不是一个本地variables,所以它不会被保存在闭包中。 你需要分配一个局部variables:
this.start = function(){ var self = this; time1 = getTime(); timeLoop = setInterval(function(){ time2 = getTime(); console.log(self.duration()); },500); }
尝试:
function Timer(){ var time1 = null; var time2 = null; var timeLoop = null; var _this = this; function getTime(){ var day = new Date(); return day.getTime(); } this.start = function(){ time1 = getTime(); timeLoop = setInterval(function(){ time2 = getTime(); console.log(_this.duration()); },500); } this.duration = function(){ return (time1 - time2) / 1000; } }
首先是事情。 Javascript不支持基于类的OOP。 它的OOP和它的inheritance是原型的。
以下是如何使用计时器示例实现原型OOPfunction的示例:
function Timer(){ var time1 = null; var time2 = null; var timeLoop = null; } Timer.prototype.getTime = function(){ var day = new Date(); return day.getTime(); } Timer.prototype.start = function(){ time1 = this.getTime(); timeLoop = this.setInterval(function(){ time2 = this.getTime(); console.log(this.duration()); }.bind(this),500); } Timer.prototype.duration = function(){ return (time1 - time2) / 1000; }
查看MDN的Javscript重新引入的自定义对象部分
在教程中显示的方式没有任何问题。 只是这是一个更简洁的方法,只有console.log
语句需要bind
调用,否则this
语句会把this
语句作为window
关联起来。 如果你摆脱它,你也可以摆脱bind
。