为什么“this”会得到不同的值？

Question

var foo = { 
    data: "a", 
    print: function() {console.log(this.data)} 
} 

element.addEventListener("click", function(){foo.print()}); 

在这种情况下，上下文是Foo对象

element.addEventListener("click", foo.print); 

当这一个是element

为什么会这样呢？

Answer 1

this的值由函数的调用方式确定。在第一种情况下，通过对象“foo”的属性引用调用“print”函数。因此，this的值是对该对象的引用。

在第二种情况下，您在设置事件处理函数时已将“print”函数的引用传递给系统。事件处理程序调用this设置为引用事件中涉及的元素。

在您的第一个示例中，匿名函数中的值this也将是对clicked元素的引用。您可以传输，为“打印”功能，如果你想：

element.addEventListener("click", function(){ foo.print.call(this); }); 

Answer 2

当你说

foo.print 

你会得到的函数的引用，但功能实际上是附着于foo通过传递foo.print而丢失的对象。所以，print成为一个未绑定的函数。你可以这样确认。

var a = foo.print; 
a();     // `this` will be referring to global now 

为了避免这种情况，你应该bind功能与对象，这样

element.addEventListener("click", foo.print.bind(foo)); 

现在，我们正在努力确保该功能被绑定到foo对象。你可以检查这个，就像这样

var a = foo.print.bind(foo); 
a();     // a