为什么“这个”有不同的价值？

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的值也将是对单击元素的引用。如果您想要，可以将其传送到“打印”功能：

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