为什么“this”会得到不同的值？ [复制]答案

【问题标题】：Why does "this" gets different values? [duplicate]为什么“this”会得到不同的值？ [复制]
【发布时间】：2014-03-25 00:02:06
【问题描述】：

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

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

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

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

当在这个时它是element

为什么会这样？

【问题讨论】：

【解决方案1】：

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

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

在您的第一个示例中，匿名函数中this 的值也将是对单击元素的引用。如果您愿意，可以将其传输到“打印”功能：

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

【讨论】：

【解决方案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

【讨论】：