javascript - 将函数绑定(bind)到事件后使用 "this"访问对象本身

Question

当我尝试使用“this”关键字访问对象时，我得到的是“window”对象而不是对象本身，因为我将它的函数绑定(bind)到一个事件，并且该事件属于 window 对象。

在示例中，alert(this.osd) 表示它未定义，因为“window”对象中没有“osd”。那么，解决这个问题的最佳方法是什么？将游戏对象定义为 window.game ？

var game = {

    osd : null,
    stage : null,

    tick : function(){
        alert(this.osd);

    },

    init : function(){

        // Configure the OSD
        this.osd = "a";

        // Preapare the stage;
        this.stage = "b";
        window.addEventListener("click",this.tick);
    }
}

game.init();

Answer 1

您需要使用对象上下文调用 tick 方法，如下所示:

var self = this;
window.addEventListener("click", function() {self.tick()});

或者，您可以在现代浏览器中使用 .bind() ，它基本上执行相同的操作(它创建一个 stub 函数，使用正确的对象上下文调用实际方法)。

window.addEventListener("click", this.tick.bind(this));

<小时/>

问题是，当您将 this.tick 传递给 addEventListener() 时，您只是传递了对 tick 函数的函数引用，而实际上并没有传递对象引用。因此，当 addEventListener() 在没有任何对象引用的情况下调用 tick 时，没有对象引用的函数调用的 this 的默认值为 window (当不处于严格模式时)，因此这就是你所看到的。