绑定"this"传递对象的成员函数时 [英] Binding "this" when passing an object's member function

问题描述

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

I had a "class" defined and was making only one instance of it. The instance possessed a member function that would end up being passed around (it's a mouse handler, but that's not important). Since I would only ever make one instance of my "class", I decided to rewrite it as a singleton by using an object literal.

所以我有

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是未定义的错误.它指的是for循环中的那一行.

However, when I try to use this code (after adding a few objects), I keep getting an that.theObjects is undefined error. It's referring to the line in the for loop.

推荐答案

2015年更新–使用 Function.bind() 来指定函数中 this 的值.然后，您可以使用 this .代替使用 that .

Update for 2015 – Use Function.bind() to specify the value of this within the function. Then, instead of using that, you can use this.

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

如果您希望 mouseHandler 具有'moused'元素的上下文，则此方法不起作用.为此，请使用下面的原始答案.

This doesn't work if you want mouseHandler to have the context of the 'moused' element. For that, use my original answer below.

如果您需要更早地支持IE8或(禁止天堂)，则需要使用

If you need to support IE8 or (heaven forbid) earlier, you'll need to use a polyfill.

由于您正在调用立即创建 mouseHandler 的函数，因此该函数在 window (而不是 mySingleton )的上下文中运行.因此，那个指的是 window .无需立即调用它，只需将其更改为方法，使其在 mySingleton :

Since you are calling the function that creates mouseHandler immediately, it is run in the context of window, not mySingleton. So that refers to window. Instead of calling it immediately, just change it to a method so that it runs in the context of mySingleton:

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

当然，由于您已经在使用单例，因此可以直接引用它.在您的点击处理程序中，而不是检查 that.theObjects ，请检查 mySingleton.theObjects .或者，在 mouseHandler 中将 var that = this 更改为 var that = mySingleton .

Of course, since you are already using a singleton, you can just reference it directly. In your click handler, instead of checking that.theObjects, check mySingleton.theObjects. Or, in mouseHandler change var that = this to var that = mySingleton.

或者，在调用上下文时将其传递给您的匿名函数:

Or, pass the context to your anonymous function when you call it:

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);

这篇关于绑定"this"传递对象的成员函数时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！