JS：这个引用不起作用

Question

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

的语义问题

虽然 this 在 tiles.init() 中引用 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 and this idea to pass additional arguments. The question has been marked a duplicate of 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 对象

JS：这个引用不起作用

JS: this reference does not work

javascript

jquery

this

argument-passing