javascript - this 内部事件处理程序的 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 函数中的实际工作方式（我可以访问“一些对象数据”。有人可以向我解释一下吗？

score 3 · Accepted Answer

原因在于thisjavascript中关键字的方式。当您将函数分配给对象内部的属性并稍后调用此函数时，marker.clicked()函数this内部将设置为点左侧的任何内容，在本例中为marker.

更新

score 1 · Accepted Answer

你像这样调用函数：

  marker.clicked();

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

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

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

那么您的代码将不起作用，因为this会引用那个“错误”的对象。

所以，一般来说：如果一个对象有一个属性，并且属性值是对一个函数的引用，并且您通过引用调用该函数，那么this在该函数中将引用该对象。这种绑定发生在每个单独的函数调用上；函数和对象之间没有永久的关系。（你可以通过类似的东西获得永久关系的效果.bind()。）

2 回答 2