JS：此参考不起作用[重复]

Question

我想将某些对象的 Javascript 代码封装在如下所示的结构中。但是，我遇到了this 的语义问题。

虽然在tiles.init() 期间this 指的是tiles 对象，但在事件处理程序中它指的是事件，即我不能使用this 从我的对象中调用其他方法。

有没有办法将对象传递给事件处理程序，这样我就不必使用全局变量来调用我自己的子例程并且仍然保留来自回调的this上下文？

我发了一个JSFiddle here。这是工作的 JS 部分：

myData = {
    'color': "red",
    'makeRed': function(){
        // don't want reference to global here!
        $(this).css("color",myData.color);
    },
    'reset': function(){
        $(this).css("color","");
    },
    'init': function(){
        $("#click").hover(this.makeRed,this.reset);
    }
};

myData.init();

我找到了几个解决方案，例如 this 和 this 想法来传递额外的参数。该问题已被标记为与this 重复，但使用.bind() 会浪费回调中jQuery 所需的this。

知道如何在不使用全局变量的情况下将事件上下文的tiles 和this 都获取到处理函数吗？

Answer 1

您可以在init 方法中使用闭包变量

'init': function () {
    var self = this;
    $("#tiles div.tile").hover(function () {
        self.hoverIn(this);
    }, function () {
        self.hoverOut(this);
    });
}

---

您的构造不起作用，因为悬停回调中的 this 未引用 tiles 对象