javascript - 一堆小闭包 vs 一个大闭包

Question

我有一个谷歌地图，我正在为不同的事物添加事件监听器。例如，我有一个 Point 对象，对于这个对象，我一直在添加事件:

google.maps.event.addListener(this.marker, 'click', (function(point) {
    return function(event) {
        alert(point.index);
    }})(this));

我有很多这样的事件(一个用于“单击”、“右键单击”、“双击”等)。

当我添加事件时，我专门围绕当前点创建了一个闭包。然而，我想做的只是:

var point = this;

google.maps.event.addListener(this.marker, 'click', function(event) {
    alert(point.index);
});

尽管有两个原因，但我一直在避免这种情况。

一个是我见过比我更了解 Javascript 的人使用“个别”闭包，所以我认为他们一定有充分的理由。

第二个是因为(而且我对 Javascript 的解释方式一无所知)我想知道创建一个大闭包是否捕获了我不会在我的事件函数中使用的所有其他变量(例如 'var color ').这会导致性能问题吗？

感谢您的帮助!

Answer 1

您的两个示例都在称为 point 的东西上创建了闭包。在第一个中，point 是外部匿名函数的参数，在第二个中，point 是一个局部变量。但无论哪种方式，它最终都会被匿名函数关闭。

创建一个接受一个命名参数的匿名函数，然后立即用参数调用它只是将值绑定(bind)到范围内的名称的一种方法。

(function(x) { 
    // now x has the value
})(getValue());

或者:

var x = getValue();
// now x has the value

不同之处在于，通过使用函数，您可以确保 x 位于其自己的命名空间中，并且不会与封闭范围内的任何其他 x 合并。也就是说，值(value)在于可维护性，而不是执行速度。

哪个会表现更好？找出答案的唯一方法是在多个浏览器上进行测试 - 它们都有自己的执行引擎。

创建的匿名函数越多，发生的小分配就越多，这似乎是合理的。所以你的第二个例子，匿名函数更少，可能表现更好。但这纯粹是毫无根据的猜测，没有在您关心的每个浏览器中进行测试。