这个事件处理程序内部的JavaScript代码解释

Question

我有一些JavaScript代码，它能正常工作。然而，我发现有点难以解释为什么它能正常工作。希望有人能够给我解释清楚。 我有一个对象必须响应特定的事件，例如点击事件。该对象的部分代码如下：

Maps.Marker = function (id, data, clickEvent) {
    this.id = id;
    this.data = data;
    this.clicked = clickEvent;
};

该对象被渲染在谷歌地图上，因此当该对象在地图中被点击时，我想要将事件冒泡到clickEvent。下面是代码的一部分：

if (marker.clicked) { // click handler defined
google.maps.event.addListener(m, "click", function () { 
        marker.clicked();
});
}

请注意，为了简洁起见，我在这里略去了很多代码，并且知道它在此处粘贴时看起来不正确。重要的是，在Google Map事件监听器内调用了marker.clicked()函数。

因此，当我的标记对象被实例化时，它看起来像这样：

var objClicked = function () {
if (this.data != null) {...}
...
}
var obj = new Maps.Marker("1", { "some object data" }, objClicked);

我完全不理解的是在objClicked函数中this.data实际上是如何工作的（我可以访问"some object data"）。 有人能解释一下吗？

- user1632306

---

重复：https://dev59.com/zHA75IYBdhLWcg3wv70j - Shadow Man

@ShadowCreeper：这不是真的重复了，对吧？ - chrisbuchholz

@chrisbuchholz 我不确定。这个更具体一些。所以可能不是。 - Shadow Man

Answer 1

原因在于javascript中this关键字的用法。当你将一个函数分配给对象内部的属性并且稍后调用该函数marker.clicked()时，函数内部的this被设置为点号左侧的内容，即这里是marker。 更新 这里有一个更详细的解释：http://www.impressivewebs.com/javascript-this-different-contexts/

- chrisbuchholz

---

这是我更喜欢的链接：http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/ - Shadow Man

@ShadowCreeper：那真的很棒！ - chrisbuchholz

Answer 2

你可以这样调用该函数：

  marker.clicked();

由于函数的引用来自“marker”所引用对象的“clicked”属性，因此该对象被用作函数中的“this”值。这就是JavaScript的工作方式。

请注意，如果您做了一些奇怪的事情，比如：

  var wrong = {};
  wrong.clicked = marker.clicked;
  wrong.clicked();

如果一个对象有一个属性，而该属性的值是对函数的引用，并且您通过引用调用该函数，则函数中的this将指向该对象。否则，如果您的代码不能正常工作，因为this将引用那个“错误”的对象。这种绑定发生在每个单独的函数调用上；函数和对象之间没有永久的关系。 （您可以使用类似.bind（）的东西获得永久关系的效果。）

- Pointy

---

感谢您的快速回复。您说：“这就是JavaScript的工作方式”。您能否添加一些具体术语，如范围（scope）之类的内容？或者甚至提供一个解释此特性的链接？ - user1632306

@user1632306 这并不是真正的“作用域”。这里是有关函数调用如何工作的规范。 看到第6步中设置thisValue的内容了吗？（不幸的是，ECMA规范很难阅读和理解。） - Pointy

谢谢 - 很棒的答案。只是想确保它与闭包无关，我是否错过了什么。 - user1632306