为什么使用 setInterval 时对象属性变得未定义

Question

如下代码，我创建了一个名为“test”的对象，并赋予它属性和方法。

属性来自它的论点。

我尝试在onload后每2秒调用一次该方法，结果显示未定义。

但是如果我只调用不使用setInterval()的方法，像这样

window.onload = function() {
   giveword.showWord();
}

我将能够显示文本“嗨”。这是为什么呢？

var giveword = new test("Hi");

function test(word) {
    this.word = word;
}

test.prototype.showWord = function() {
    document.getElementById("msg_box").innerHTML = this.word;
}

window.onload = function() {
    setInterval(giveword.showWord, 2000);
}

感谢您的帮助...

Answer 1

原因是因为在您的 test.prototype.showWord 函数中，您的 this 对象指的是调用该函数的上下文，即从 setInterval 调用时的窗口对象。

我认为您想要做的是使用闭包使 showWord() 的上下文成为这样的给定词实例：

        var giveword = new test("Hi");

        function test(word) {
            this.word = word;
        }

        test.prototype.showWord = function() {
            document.getElementById("msg_box").innerHTML = this.word;
        }


        window.onload = function(){
            setInterval(function(){giveword.showWord();}, 2000); // <<-- here's the closure
        }

不同之处在于，通过闭包，您告诉 setInterval 函数在声明 setInterval 时调用上下文中的函数。当 setInterval 被声明时，范围内有一个名为 giveword 的变量，它有一个方法 showWord() 返回初始输入的值。 （关闭很难解释，如果您需要更多信息，恐怕最好由其他人解释它们。）