MooTools/JavaScript 变量范围答案

【问题标题】：MooTools/JavaScript variable scopeMooTools/JavaScript 变量范围
【发布时间】：2011-03-03 03:08:37
【问题描述】：

我正在尝试使每个数字显示为可点击。 “1”应该alert()80，“2”应该产生60，等等。

但是，当调用alert(adjust) 时，它只显示0，而不是正确的数字。但是，如果注释掉的 alert(adjust) 未注释，它会在页面加载时生成正确的数字，但在点击时不会生成。

我想知道为什么addEvents 中的代码无法访问之前定义的变量adjust。

<html>
<head>
<script type="text/javascript" charset="utf-8" src="mootools.js"></script>
<script type="text/javascript" charset="utf-8">
    window.addEvent('domready', function() {

            var id_numbers = [1,2,3,4,5];

            for(var i = 0; i<id_numbers.length; i++) {
                var adjust = (20 * (5 - id_numbers[i]));
                // alert(adjust);
                $('i_' + id_numbers[i]).addEvents({
                    'click': function() {
                        alert(adjust);
                    }
                });
            }

    });
</script>
</head>
<body>

<div id="i_1">1</div>
<div id="i_2">2</div>
<div id="i_3">3</div>
<div id="i_4">4</div>
<div id="i_5">5</div>

</body>
</html>

谢谢。

【问题讨论】：

这是一个常见问题 - 请参阅相关问答stackoverflow.com/questions/tagged/javascript+closures+loops。

标签： javascript loops mootools closures scope

【解决方案1】：

a very common closure problem 在 for 循环中。

封闭在闭包中的变量共享相同的单一环境，因此在调用 click 回调时，for 循环将运行，adjust 变量将指向最后一个它被分配的值。

你可以用更多的闭包来解决这个问题，使用函数工厂：

function makeClickHandler(adjust) {  
   return function() {  
      alert(adjust);
   };  
}

// ...

for(var i = 0; i<id_numbers.length; i++) {
   var adjust = (20 * (5 - id_numbers[i]));

   $('i_' + id_numbers[i]).addEvents({
      'click': makeClickHandler(adjust)
   });
}

如果您不熟悉闭包的工作原理，这可能是一个相当棘手的话题。您可以查看以下 Mozilla 文章进行简要介绍：

Mozilla Dev Center: Working with Closures

【讨论】：