此内部事件处理程序的JavaScript代码说明

Question

我有一些JavaScript代码可以正常工作。但是，我发现它有点难以解释为什么它确实有效。我希望，有人可以向我说清楚。 我有一个必须响应某些事件的对象，例如点击活动。该对象的一部分如下所示：

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

该对象在Google地图中呈现，因此当在地图中单击该对象时，我想将该事件冒泡到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);

我完全不明白的是this.data如何在objClicked函数中实际工作（我可以访问“一些对象数据”）。 有人可以向我解释一下吗？

Answer 1

原因在于javascript中this关键字的方式。将函数分配给对象内的属性并稍后调用此函数marker.clicked()时，函数内的this将设置为点左侧的任何内容，在这种情况下是marker。

<强>更新

以下是更详尽的解释：http://www.impressivewebs.com/javascript-this-different-contexts/

Answer 2

你调用这样的函数：

  marker.clicked();

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

请注意，如果您做了类似这样的奇怪事情：

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

那么你的代码就行了，因为this会引用那个“错误的”对象。

因此，通常：如果一个对象有一个属性，并且属性值是对一个函数的引用，并且你通过引用调用该函数，那么函数中的this将引用该对象。绑定发生在每个单独的函数调用上;函数和对象之间没有永久关系。 （您可以使用.bind()之类的内容获得永久关系的效果。）