Question

一个简单的问题，我没有找到答案。如果我处理一个方法传递给DOM事件处理程序，this引用DOM元素：

$('#foo').click(shapeA.describe);

然而，如果我将它包装在一个函数中，它会引用父对象（即你最常想要的效果）：

$('#foo').click(function() { shapeA.describe(); });

我知道我可以使用bind等各种技术来确保可预测的行为。但我想要理解上面两行之间的区别。

我找到了一篇文章'Understanding the this keyword'，其中指出：

如果我们使用点（即obj.foo（））或括号（即obj“foo”）表示法将函数作为对象的属性调用，这将引用正文中的父对象功能

无法解释此行为。这篇文章可能不正确，但它是迄今为止我发现的最好的文章！

那么，任何人都可以在与'this'相关的规则的上下文中解释这种行为吗？

，这是一个小提琴

Answer 1

在此代码中：

$('#foo').click(shapeA.describe);

您在click方法中传递了describe方法 而没有shapeA 。 shapeA.describe就是您引用describe的方式。 click中的代码不知道describe来自shapeA对象，它将在当前的DOM上下文中调用。

在第二种情况下，匿名函数中的this是当前的DOM对象。

$('#foo').click(function() { 
   console.log(this);// `this` here refers to the current DOM object
   shapeA.describe(); 
});

但this中的describe将是您使用点表示法调用的shapeA：shapeA.describe();