Question

在我的应用程序中，我有一个具有多个属性的对象，这些属性在应用程序的不同位置设置。

在我的一个原型函数中，我有一个以间隔运行的函数来更新计时器，并且在该函数中应该设置属性（this。）theTime。问题是这不会发生，我想原因是this.theTime指向函数本身而不是对象。

以下是我的代码的两个版本，它们都不起作用。有什么提示吗？

// 1.
function changeTime() {
    this.theTime = setTime(time);
    time.setSeconds(time.getSeconds()+1);
    p1.html(this.theTime);
}
interval = setInterval(changeTime(), 1000 );

// 2.
function changeTime(theTime) {
    theTime = setTime(time);
    time.setSeconds(time.getSeconds()+1);
    p1.html(theTime);
}
interval = setInterval( function() { changeTime(this.theTime); }, 1000 );

...

为了使它更清晰，上面的函数每秒更新一个计时器（例如00:00:01 - > 00:00:02），我希望this.theTime随时间更新。

当计时器停止时（在另一个原型函数中发生）我希望能够看到计时器停止的时间，但现在this.theTime是默认值，这意味着上面的函数不更新objects属性。相反，上面函数中的this.theTime必须是局部变量。

注意：setTime()是与上述函数在同一原型函数中存在的另一个函数。

Answer 1

当你在某个函数this中使用它时，它正在引用实际函数所在的对象。这里：

function myF() {
    this.var = 'hey';
}

您可以使用此作为var（myF作为构造函数）：

var obj = new myF();
alert(obj.var);

或者在这里：

function myF2() {
    if (typeof this.var === 'undefined') {
        this.var = 0;
    } else {
        this.var += 1;
    }
    alert(this.var);
}

这里var再次是myF2的属性（正如我所说的那样，它不仅仅是一个函数，因为在JavaScript函数中是对象）。每次调用myF2时，this.var都会被递增并发出警报（只是在第一次调用时它将被初始化）。

在第二个函数（在第二个setInterval中使用的匿名函数）中你也是这样做的。

一种解决方案是在两种情况下都使theTime成为全局，因此您不需要使用：

this.theTime

所以结果可能是这样的：

var theTime = 0, interval;
function changeTime() {
    theTime += 1;
    document.body.innerHTML = theTime;
    setInterval
}

interval = setInterval(changeTime, 1000 );

http://jsfiddle.net/u3EuC/

Answer 2

您可以通过编写

轻松验证

debugger;

在函数中设置断点。然后找到你的问题可能很容易。

Answer 3

您认为this关键字存在问题，这是正确的。 JavaScript中的this有点棘手，因此在函数中使用它（特别是setTimeout或setInterval是有风险的。

您要做的是在创建函数时保存this的值。

以下是更多信息：http://justin.harmonize.fm/index.php/2009/09/an-introduction-to-javascripts-this/

Answer 4

也许这些评论会引导您采用正确的方式

var theTime; // global variable
function changeTime() {
    theTime = setTime(time); // theTime is global variable declared above (accesible from anywhere)
    // var myTime = setTime(time); // myTime is local variable
    time.setSeconds(time.getSeconds()+1);
    p1.html(theTime);
}
interval = setInterval(changeTime, 1000 ); // no braces

Answer 5

杰森，在你的澄清之后，我认为最好为你提供全新的答案，试图在JS中解释这个语句尽可能好（和简单）。我希望它有所帮助。

<html>
<body>
<div id="output1"></div>
<div id="output2"></div>
<script>
// theTime is undefined in global scope

function obj(target) {
  var theTime = 0; 
  var that = this; // var means "private"
  this.changeTime = function() { // here "this" points to obj and means "public"
    theTime++; // no var => outer scope = obj scope
    // here "this" points to changeTime function, not to obj!
    // "that" points to obj, you may use that.theTime
    document.getElementById(target).innerHTML = theTime;
  }
}

var o1 = new obj("output1");
var o2 = new obj("output2");

setInterval(o1.changeTime,1000); // update output1 content every second
setInterval(o2.changeTime,500); // update output2 content twice a second
</script>
</body>
</html>

到达对象的属性

5 个答案: