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

JavaScript code explanation of this inside event handler

本文关键字：JavaScript 代码 解释 程序 内部 事件处理      更新时间：2023-09-26

我有一些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);

我完全不明白的是这是怎么发生的。数据实际上在objClicked函数中工作(我可以访问"一些对象数据"。有人能给我解释一下吗?

原因在于javascript中this关键字的使用方式。当你将一个函数赋值给一个对象中的属性，然后调用这个函数marker.clicked()时，函数中的this将被设置为圆点左侧的任何值，在本例中是marker。

下面是更详细的解释:http://www.impressivewebs.com/javascript-this-different-contexts/

您可以这样调用函数:

  marker.clicked();

由于对函数的引用来自"marker"所引用对象的"clicked"属性，因此该对象用于函数中的this值。这就是JavaScript的工作原理。

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

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

那么你的代码将无法工作，因为this会引用那个"错误的"对象。

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

相关文章：