Dyl*_*tie 10 javascript puzzle scope anonymous-function
查看以下HTML/Javascript代码片段:
<html>
<head>
<script type="text/javascript">
var alerts = [];
for(var i = 0; i < 3; i++) {
alerts.push(function() { document.write(i + ', '); });
}
for (var j = 0; j < 3; j++) {
(alerts[j])();
}
for (var i = 0; i < 3; i++) {
(alerts[i])();
}
</script>
</head><body></body></html>
Run Code Online (Sandbox Code Playgroud)
这输出:
3, 3, 3, 0, 1, 2
Run Code Online (Sandbox Code Playgroud)
这不是我所期待的 - 我期待输出 0, 1, 2, 0, 1, 2,
我(错误地)假设被推入数组的匿名函数将表现为闭包,捕获i创建函数时分配的值- 但它实际上表现i为行为全局变量.
任何人都可以解释i这个代码示例的范围内发生了什么,以及为什么匿名函数没有捕获它的值?
范围是定义变量的函数(除了没有一个,因此它是全局的).
您传递的匿名函数正在访问父函数(再次为全局)范围中定义的变量.
你需要一个实际的关闭.
alerts.push(
function (foo) {
return function() {
document.write(foo + ', ');
}
}(i)
);
Run Code Online (Sandbox Code Playgroud)
在Javasript中,唯一"有趣的"词法范围边界是函数体.函数中任何地方声明的任何东西(除了另一个嵌套函数之外的任何地方!)都在同一范围内.关于声明解释方式也有一些奇怪的事情.
您的匿名函数确实充当闭包,但实例化的每个函数将共享相同的"i".我使用的一个技巧是添加另一层功能:
for (var i = 0; i < whatever; i++) {
(function(idaho) {
whatever(function() { alert("my own private " + idaho); });
})(i);
}
Run Code Online (Sandbox Code Playgroud)
在某些时候,希望所有的浏览器都支持新的"let"语句,这是一种更短,更不奇怪的方式来做基本相同的事情.