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