Question

我已经尝试通过阅读来了解此关键字引用的内容。好吧，那没有帮助。所以请帮帮我这个！手动函数调用与事件监听器绑定之间的区别在哪里？

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

在document.addEventListener this内部会引用document，因为您正在调用document对象的函数。当您直接致电app.bar()时，this会因同一原因引用app个对象。
如果您想引用app，则必须使用bind()手动重新定义函数的上下文：

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

Answer 2

它不是this，而是foo未定义，因为当this被document绑定为app.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 */，这是未定义的。

app.bar

http://jsbin.com/efitah/2/edit

您可以使用函数来调用document.addEventListener("click", function(event){ app.bar(); });

{{1}}

Answer 3

我在这里遇到了幸运的打击......用module pattern来试试我从来没有关闭，但他们似乎在这里为我工作。如果有人对闭包有很好的解读，请发表评论！

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

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

})();

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

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

Answer 4

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

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

4 个答案: