jquery - 关于 jQuery 的奇怪输出

Question

---

var message = 'Spoon!';
$('#foo').bind('click', function() {
alert(message);
});

message = 'Not in the face!';
$('#bar').bind('click', function() {
alert(message);
});

---

为什么两个输出信息是一样的：“Not in the face！”；'foo' 的闭包中的第一条消息不是指的是 'Spoon!' 吗？为什么不？请有人解释。我不明白教程的解释。

Answer 1

这是因为事件处理程序是异步启动的。虽然您设置的消息值是在第一个线程中完成的。

所以基本上你的程序会读取你的整个代码，将值设置为'Spoon!'，然后设置为你设置的最后一个'Not in the face!'。然后，当您单击任一按钮时，它会提醒 message 的值'Not in the face!'。

尝试将消息放入函数中，然后您会看到每个消息都不同。这将按您的预期工作，因为您也异步设置了值。

$('#foo').bind('click', function() {
  var message = 'Spoon!';
  alert(message);
});

$('#bar').bind('click', function() {
  var message = 'Not in the face!';
  alert(message);
});

Answer 2

单击时foo，会提示 的最后一个值message，即“不在脸上！” 因为这行代码在页面加载时已经执行。

Answer 3

只有函数的绑定发生。代码的实际执行发生在点击事件发生时。当点击事件发生时，消息变量将其最后一个值，即“不在脸”

Answer 4

// below you are estblishing the "variable" message and setting it to the String "Spoon!"
var message = 'Spoon!';
// Here you use the jquery method to tell a button with the ID "foo" 
//    to alert the variable "message"
$('#foo').bind('click', function() {
    alert(message);    //    the alert
});

//  Here's where you're getting confused
//Below you are "re-asigning the variable "message" to be the String "Not in the face!"
message = 'Not in the face!';
// below is another click bind to a button, but this time the id name is "bar"
// so both buttons (foo and bar) are committing the same action, 
// but your variable has been changed to "Not in the face!" and therefor
//  will never display "Spoon!"
$('#bar').bind('click', function() {
    alert(message);
});