V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
kuaizihao
V2EX  ›  JavaScript

为什么 createFunctions 里的 i 等于 10

  •  
  •   kuaizihao · 2017-05-14 14:10:31 +08:00 · 2675 次点击
    这是一个创建于 2545 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先上代码

    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 ?

    10 条回复    2017-05-14 16:37:31 +08:00
    coo
        1
    coo  
       2017-05-14 14:56:11 +08:00   ❤️ 1
    1. 用 let 可以解决这个问题。
    2. 它先定义了十个 function 并没有执行,而此刻 i 已经是 10,这十个 function 指向的全部是同一个 i,所以会返回 10。
    kuaizihao
        2
    kuaizihao  
    OP
       2017-05-14 15:06:06 +08:00
    @coo 谢谢回复,
    也就是说,js 在执行 for 循环的时候,会先定义所有的 function,然后再执行每个 function 里面的代码?
    littleshy
        3
    littleshy  
       2017-05-14 15:30:31 +08:00   ❤️ 1
    那个 i 是在等你 result 里的函数执行时才确定值的。而这时候循环已经完成,所以 i 已经是 10。
    mapleray
        4
    mapleray  
       2017-05-14 15:46:04 +08:00   ❤️ 1
    搜下 late binding closures
    coo
        5
    coo  
       2017-05-14 15:49:02 +08:00
    是你的这段代码定义了十个函数,你调用 result[0]() 的时候才执行。
    aboutTime
        6
    aboutTime  
       2017-05-14 16:13:59 +08:00   ❤️ 1
    匿名函数运行时执行,可以看看匿名函数和 ES6 的箭头函数以及函数申明
    kuaizihao
        7
    kuaizihao  
    OP
       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
        8
    coo  
       2017-05-14 16:30:21 +08:00
    @kuaizihao #7 是。
    kuaizihao
        9
    kuaizihao  
    OP
       2017-05-14 16:31:54 +08:00
    @aboutTime
    谢谢指导
    kuaizihao
        10
    kuaizihao  
    OP
       2017-05-14 16:37:31 +08:00
    @coo
    @littleshy
    @mapleray
    @aboutTime

    感谢各位 V 友的帮助,谢谢大家!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2234 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 09:11 · PVG 17:11 · LAX 02:11 · JFK 05:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.