Javascript 忘记了 this.something 变量答案

【问题标题】：Javascript forgets this.something variableJavascript 忘记了 this.something 变量
【发布时间】：2014-01-21 16:39:22
【问题描述】：

我在 JavaScript 类（函数）中有变量 this.foo 和函数 this.bar()，this.bar() 我在间隔中调用但有一个小问题，JavaScript 忘记了 this.foo，我无法使用它。 this.bar() 中的 foo。为什么？

function Somethink(element) {
    this.foo = element;

    this.bar = function () {
            // And now this.foo is undefined
    }

    setInterval(this.bar, 1000)
}

【问题讨论】：

标签： javascript object this intervals

【解决方案1】：

这是因为 setInterval 在全局对象的上下文中调用 this.bar，而不是在当前对象的上下文中。尝试这样调用它：

var self = this;
setInterval(function () { self.bar() }, 1000);

更新正如在 cmets 中指出的那样，另一种选择是使用 bind()

setInterval(this.bar.bind(this), 1000);

【讨论】：

我更同意@epascarello 的第二个选项。更容易使用.bind...setInterval(self.bar.bind(this),1000);
不需要“自我”。 this.bar.bind(this) 就足够了
是的，我不是故意把它放在那里 xD。我只是在看你帖子中的自我，不小心输入了它。我的意思是setInterval(this.bar.bind(this), 1000);。感谢您指出这一点

【解决方案2】：

因为this 是间隔运行时的窗口范围。您需要使用闭包或bind()

window.setInterval(this.bar.bind(this), 1000);

【讨论】：

【解决方案3】：

function Somethink(element) {
    var foo = element;

    var bar = function () {

    }

setInterval(bar, 1000)
}

改用变量。 'This' 根据你调用它的位置改变上下文

【讨论】：

【解决方案4】：

行为是正确的。在调用bar() 时，this 可能会发生任何事情。通常的解决方法是将this 分配给一个局部变量：

function Somethink(element) {
    var that = this; // trick
    that.foo = element;

    that.bar = function () {
            // Use "that" in here
    }

    setInterval(that.bar, 1000)
}

that 将确保代码保留对this 原始值的引用。

【讨论】：

【解决方案5】：

你可以这样做：

function Somethink(element) {
    this.foo = element;

    this.bar = function () {
        // And now this.foo is undefined
    }
    var self = this

    setInterval(self.bar, 1000)
 }

【讨论】：

"self.bar" 无论如何都会在全局对象上下文中被调用。