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局部变量中的当前值.

更新:

为了完整起见(我希望,@安德鲁,你不介意我把它放在这里)."最酷"的方法可能是使用函数的参数并使用此参数立即执行函数:

var globalNum="dummy";

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

globalNum="dummyAgain";

"技巧"是参数的名称和全局变量的名称是相同的.

这通常也用于引用具有较短标识符的某个对象而不会污染全局命名空间,例如使用jQuery:

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