javascript - javascript - 当方法绑定到事件侦听器时，“this”未定义

Question

我已经尝试通过阅读来理解 this 关键字所指的内容。好吧，那没有帮助。所以请帮我解决这个问题！
手动函数调用和绑定到事件监听器的区别在哪里？

var app = {
    foo: true,
    bar: function() {
        console.log("this",this.foo);
        console.log("app",app.foo);
    }
}

app.bar();
/*  this true
    app true    */

document.addEventListener("click", app.bar);
/*  this undefined
    app true    */

谢谢你的帮助

Answer 1

Inside your document.addEventListener this will refer to document, since you are calling a function of document object. When you are calling app.bar() directly, this refers to app object for the same reason.
If you want to refer to app you have to manually redefine function's context, using bind():

document.addEventListener("click", app.bar.bind(app));

Answer 2

它不是this，但那foo是未定义的，因为this是documentwhenapp.bar被绑定为事件侦听器document。所以this.foo变成document.foo了未定义的。

document.foo = "document.foo";

var app = {
    foo: true,
    bar: function() {
        console.log("this",this.foo);
        console.log("app",app.foo);
    }
};

app.bar();
/*  this true
    app true    */

document.addEventListener("click", app.bar);
/*  this document.foo
    app true    */

你可以绑定上下文

document.addEventListener("click", app.bar.bind(app));

或使用函数调用app.bar

document.addEventListener("click", function(event){
    app.bar();
});

Answer 3

我在这里遇到了幸运...尝试了模块模式
，我从来没有关闭过，但它们似乎在这里为我工作。如果有人对闭包有很好的了解，请发表评论！

var app = (function() {
    var foo = true;

    return {
        bar: function() {
            console.log(foo);
        }
    };

})();

app.bar(); //true
document.addEventListener("click", app.bar); //true

编辑：对不起，我只是认为这与 this 关键字无关。

Answer 4

document.addEventListener("点击", app.bar.bind(app);