为什么 createFunctions 里的 i 等于 10

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2749 天前的主题，其中的信息可能已经有所发展或是发生改变。

先上代码

function createFunctions() {

var result = new Array();
for(var i=0; i<10; i++) {
    result[i] = function() {
        return i;
    }
}
return result;

}

我在看 js 高级程序设计，其中闭包与变量一节没看懂当我们调用 result[0]函数时，这个函数执行到 return 语句，发现并没有 i 这个变量，于是顺着作用链去找，在 createFunctions 里找到了已经变成 10 的 i，于是输出 10。

问题来了：当我们调用 result[0]函数时，createFunctions 里的 i 为什么会变成 10 ？

result

return

函数

function

10 条回复 • 2017-05-14 16:37:31 +08:00

coo

2017-05-14 14:56:11 +08:00

1. 用 let 可以解决这个问题。
2. 它先定义了十个 function 并没有执行，而此刻 i 已经是 10，这十个 function 指向的全部是同一个 i，所以会返回 10。

kuaizihao

2017-05-14 15:06:06 +08:00

@coo 谢谢回复，
也就是说，js 在执行 for 循环的时候，会先定义所有的 function，然后再执行每个 function 里面的代码？

littleshy

2017-05-14 15:30:31 +08:00

那个 i 是在等你 result 里的函数执行时才确定值的。而这时候循环已经完成，所以 i 已经是 10。

mapleray

2017-05-14 15:46:04 +08:00

搜下 late binding closures

coo

2017-05-14 15:49:02 +08:00

是你的这段代码定义了十个函数，你调用 result[0]() 的时候才执行。

aboutTime

2017-05-14 16:13:59 +08:00

匿名函数运行时执行，可以看看匿名函数和 ES6 的箭头函数以及函数申明

kuaizihao

2017-05-14 16:23:47 +08:00

@littleshy
@mapleray
@coo

for 循环的结果是：

result[0] = function() {return i;}；
result[1] = function() {return i;}；
~~~
result[9] = function() {return i;}；

只有当我调用 result[0]（）；时才执行 return i ；对不？

coo

2017-05-14 16:30:21 +08:00

@kuaizihao #7 是。

kuaizihao

2017-05-14 16:31:54 +08:00

@aboutTime
谢谢指导

kuaizihao

2017-05-14 16:37:31 +08:00

@coo
@littleshy
@mapleray
@aboutTime

感谢各位 V 友的帮助，谢谢大家！