处理程序中的 JavaScript 变量可见性

Question

我对它的工作原理有点困惑，让我向您发布一个示例代码:

someClass = function() {
    this.a = 10;

    this.Foo = function() {
        console.log(this.a); // will output "10"
        setTimeout(this.Bar, 1);
    }

    this.Bar = function() {
        console.log(this.a); // undefined
    }
}
var instance = new someClass();
instance.Foo();

我的理解是，如果从 setTimeout (或其他“处理程序”类型的东西)调用 this.a 在函数 Bar 中是不可见的。解决这个问题的常见/正确方法是什么？

(顺便说一句，我正在 Node.js 中尝试这个)

谢谢。

Answer 1

问题在于，当您将函数传递给 setTimeout 时，作用域 (this) 会丢失。

这是修复此问题的最简单方法，通过闭包将 this 存储为引用并使用它。

// This uses _me_ everywhere for consistency, but the only place that really needs it 
// is within the Bar method. But consistency in this case makes your code more change-
// proof, say if someone calls setTimeout(instance.Foo, 1)
someClass = function() {

    var me = this;
    me.a = 10;

    me.Foo = function() {
        console.log(me.a); // will output "10"
        // setTimeout will cause me.Bar to be called with window as the context
        setTimeout(me.Bar, 1);
    }

    me.Bar = function() {
        // so we avoid using _this_ in here
        console.log(me.a); // 10
    }
}

稍微优雅一点的方法是使用 Function.bind

someClass = function() {
    this.a = 10;

    this.Foo = function() {
        console.log(this.a); // will output "10"
        // the bind call will force it to use the first argument as `this`
        setTimeout(this.Bar.bind(this), 1);
    }

    this.Bar = function() {
        console.log(this.a); // undefined
    }
}