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

我已经包括硬编码价值线和“这”行不起作用。

谢谢，

杰兰特

Answer 1

如果你想让this属性保持一致，你应该绑定被调用的函数。

例如，

setInterval(function() { /* code here */ }.bind(this), 500)

这样，内部函数的this和外部函数的一样。

Answer 2

每当你看到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; } } 

Answer 3

this不是一个本地variables，所以它不会被保存在闭包中。 你需要分配一个局部variables：

 this.start = function(){ var self = this; time1 = getTime(); timeLoop = setInterval(function(){ time2 = getTime(); console.log(self.duration()); },500); } 

Answer 4

尝试：

 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; } } 

Answer 5

首先是事情。 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 。