发生了什么

Question

我是一名精通c＃的程序员，我对HTML和Javascript有一点经验，但我似乎无法找出对象。

我正在尝试创建一个循环，它一直保持更新，直到计数器达到5然后停止循环。但在Update方法中，计数器= NaN。

这是我的确切代码。

function LoginScreen() {
    this.IntervalID = null;
    this.counter = 0;

    this.Start = function () {
        this.IntervalID = setInterval(this.Update, 60 / 1000);
    };

    this.Stop = function () {
        clearInterval(this.IntervalID);
    };

    this.Update = function () {

        this.counter++;
        alert(this.counter);

        if (this.counter > 5) this.Stop();
    };

}

LS = new LoginScreen();
LS.Start();

Answer 1

问题是this，Start()和Stop()函数内部Update()的范围。在这些函数中，this指的是函数，而不是LoginScreen对象。

为了解决这些问题，我喜欢使用一个小self变量来帮助解决范围问题。这样，无论引用self变量是什么都将使用该对象。这就是我的意思：

function LoginScreen() {

    // add this for scope fun...
    var self = this;

    this.IntervalID = null;
    this.counter = 0;

    this.Start = function () {
        self.IntervalID = setInterval(self.Update, 60 / 1000); // updated...
    };

    this.Stop = function () {
        clearInterval(self.IntervalID); // updated...
    };

    this.Update = function () {
        self.counter++; // updated...
        alert(self.counter); // updated...

        if (self.counter > 5) self.Stop(); // updated...
    };
}

LS = new LoginScreen();
LS.Start();

希望这是有道理的！

Answer 2

你遇到了可怕的Javascript“这个”问题。

尝试将this.Update代码更改为：

var self = this;
this.Update = function () {

        self.counter++;
        alert(self.counter);

        if (self.counter > 5) self.Stop();
    };

但请等待more

Answer 3

这是Javascript中一个非常常见的错误。我想包括我在内的每个人都曾这样做过。不过，这很容易理解。

发生了什么

当您将函数作为对象的方法调用时，将其上下文设置为该对象。这意味着此函数中的this将指向您的上下文对象。

MyObject = {};
MyObject.someValue = 1;

MyObject.myMethod = function() {
    console.log(this.someValue); // This will log "1" to the console, as expected
};

现在是棘手的部分：你可以改变一个函数的上下文。我们在这里添加一些代码行：

MyOtherObject = {};
MyOtherObject.someValue = 2;
MyOtherObject.myMethod = MyObject.myMethod;

现在拨打MyOtherObject.myMethod时，您调用的功能与调用MyObject.myMethod的功能相同，但在一种情况下，this指向MyObject，在另一种情况下，MyOtherObject指向setInterval(MyObject.myMethod, 1000)。

现在，当您致电window时，函数上下文将设置为setInterval（技术上，window.setInterval调用window），因为someValue不会有一个名为this的属性，它将是未定义的。

如何解决

要解决此问题，您可以创建对LoginScreen对象的另一个引用。除非您更改它，否则它将始终指向整个范围内的同一对象。然后，您可以将其用作function LoginScreen() { this.IntervalID = null; this.counter = 0; // Create another reference to "this" var self = this; this.Start = function () { // The function behind "this.Update" will always be called with "window" // as its context. this.IntervalID = window.setInterval(this.Update, 60 / 1000); }; this.Stop = function () { // This function is called as "self.Stop", therefore "this" points to // "self", which points to the right object, so you can use "this". clearInterval(this.IntervalID); }; this.Update = function () { // Inside this function, "this" points to "window". // You therefore have to use the previously declared "self" // to point to the right object. self.counter++; alert(self.counter); if (self.counter > 5) self.Stop(); }; } LS = new LoginScreen(); LS.Start();的替代方案，而无需担心上下文。

{{1}}

进一步参考

this - Mozilla Developer Network JavaScript中 this 的另一种解释，以及一些控制它的函数。

在JavaScript中使用'this'创建对象

3 个答案:

发生了什么

如何解决

进一步参考