传递对象的成员函数时绑定“this”

我定义了一个“类”，并且只创建了它的一个实例。该实例拥有一个最终会被传递的成员函数（它是一个鼠标处理程序，但这并不重要）。由于我只会创建“类”的一个实例，因此我决定使用对象文字将其重写为单例。

所以我有

var mySingleton = {
    theObjects : [];
}

mySingleton.mouseHandler = (function() {
    var that = this;
    return function (e) {
        for (var indx = 0; indx < that.theObjects.length; indx++) {
            // do something to that.theObjects[indx];
        }
    }
}());

mySingleton.addObject = function(newObj) {
    this.theObjects.push(newObj);
}

但是，当我尝试使用此代码（添加一些对象后）时，我不断收到 that.theObjects is undefined 错误。它指的是 for 循环中的行。

2015 年更新 – Use Function.bind() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind指定值this函数内。然后，不要使用that， 您可以使用this.

mySingleton.mouseHandler = function (e) {
    for (var indx = 0; indx < this.theObjects.length; indx++) {
        // do something to this.theObjects[indx];
    }
}.bind(mySingleton);

如果你想要的话，这不起作用mouseHandler具有“鼠标”元素的上下文。为此，请使用下面我的原始答案。

如果你需要支持 IE8 或更早（但愿不会），你需要使用polyfill https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Polyfill.

由于您正在调用创建的函数mouseHandler立即，它在上下文中运行window, not mySingleton. So that指的是window。不要立即调用它，只需将其更改为方法，以便它在上下文中运行mySingleton:

mySingleton.getMouseHandler = function() {
    var that = this;
    return function() { ... };
};
myElement.onclick = mySingleton.getMouseHandler();

当然，由于你已经使用了单例，所以直接引用即可。在您的点击处理程序中，而不是检查that.theObjects, check mySingleton.theObjects。或者，在mouseHandler change var that = this to var that = mySingleton.

Edit:或者，在调用匿名函数时将上下文传递给它：

mySingleton.mouseHandler = (function() {
    var that = this;
    return function (e) {
        for (var indx = 0; indx < that.theObjects.length; indx++) {
            // do something to that.theObjects[indx];
        }
    }
}).call(mySingleton);