javascript - 如何正确处理 JavaScript 事件中的闭包？

Question

我正在构建自己的类(用于 SVG 对象)并且最近开始向其中添加事件处理。按照标准模型，我喜欢这种类型的交互

svgobj.bind('click', function(e){
  // do stuff here on click with svgobj
});

即使我使用 jQuery 来附加事件，这个“绑定(bind)”不是 jQuery bind() 方法并且 svgobj 不是 jQuery 对象

我遇到的问题是，如果我创建多个对象，那么匿名函数中的 svgobj 引用是最后创建的 svgobj，而不是用于事件触发。因此，例如，如果我的事件负责更改对象的状态，那么无论我单击哪个对象，都只会更改最后一个对象的状态。

我知道这是一个关闭问题，在一位同事的帮助下，我找到了一个修复程序，但它非常难看。它涉及将函数包装在一个自执行的匿名函数中，我将正确的 svgobj 传递给该函数并返回原始函数，这是一个示例

svgobj.bind('click', (function(target){
    return function(e){
      // do stuff here on click with target, i.e. the correct svgobj
    }
  })(svgobj)
);

它有效，您可以在此处查看示例 http://jsfiddle.net/2late2die/98te2/ .您可以通过单击红色/绿色区域来测试拖动事件(通过圆圈部分)和更改状态事件。

有没有更好的方法来解决这个问题？我想避免每次我想在事件上做某事时都必须使用两个匿名函数。也许有一种方法可以将自执行函数移动到首先调用事件的方法中，这样“在外面”看起来仍然只是一个常规函数作为参数传递？

Answer 1

通过使用 .bind (我假设 jQuery 的使用方式)，函数 中的 this 成为目标，因此不需要使用变量 svobj 在函数内部。

svgobj.bind('click', function (e) {
  // do stuff here on click with `this` or `$(this)`
});

如果您确实想要一份与 .bind 时完全相同的当前 svgobj 的副本，那么您需要将其捕获到自己的副本中范围以保护它免受更改。您描述为“丑陋”的 lambda 函数方式很可能是实现此目的的最简单方法。