JavaScript 中的闭包

Question

我有这样的代码，我试图将事件处理程序添加到某个按钮。我想使用全局变量 &将其当前值存储在回调闭包中不是它的参考。

var globalNum="dummy";
function A()
{
  $("#button").click(function()
  {
     $("#button").append(globalNum);
  });
}

globalNum="dummyAgain";

现在，如果单击事件被触发，将添加什么 - “dummy”或“dummyAgain”？ 我相信这将是“dummyAgain”，因为存储了闭包全局变量的引用。我想要绑定价值。 我知道我可以在 A 内部创建一个局部变量，我可以用全局变量 & 初始化它。绑定它，但是还有其他更酷的方法吗？

谢谢

Answer 1

你是对的，它会附加dummyAgain。您可以使用 bind() 来处理此问题并发送一些事件数据：

var globalNum="dummy";
(function A()
{
  $("#button").bind('click', {localNum: globalNum}, function(e)
  {
     $("#button").append(e.data.localNum);
  });
})();

globalNum="dummyAgain";

请注意，我立即执行函数 A，因此点击处理程序在 globalNum 值更改之前附加。正如 @Andrew 在他的评论中指出的，这与根本不使用“包装”函数 A 的效果相同。

---

没有 bind 的相同解决方案：

(function()
 {
  var localNum = globalNum;
  $("#button").click(function()
  {
     $("#button").append(localNum);
  });
})();

这里匿名函数可用于捕获局部变量中的当前值 globalNum。

---

更新：

为了完整起见（我希望@Andrew，你不介意我把它放在这里）。 “最酷”的方式可能是为函数使用一个参数，并使用该参数立即执行该函数：

var globalNum="dummy";

(function(globalNum)
 {
  $("#button").click(function()
  {
     $("#button").append(globalNum);
  });
})(globalNum);

globalNum="dummyAgain";

“技巧”是参数的名称和全局变量的名称相同。

这也经常用于引用一些具有较短标识符的对象，而不会污染全局名称空间，例如使用 jQuery：

(function($) {
    // jQuery == $
})(jQuery)

Answer 2

也许有一些更酷的方法，但在 A 内部声明局部变量是最简单、最直接的方法，因此也是最好的方法。