js中匿名函数不执行的问题

Question

我按照《js高级程序设计》里的以下代码（p181 关于闭包的知识点）敲到JS Bin中，

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

通过console.log输出发现直接输出了该匿名函数的一个数组，而不是输入一个数值的数组：

[function (){
    return i;
  }, function (){
    return i;
  }, function (){
    return i;
  }, function (){
    return i;
  }, function (){
    return i;
  }, function (){
    return i;
  }, function (){
    return i;
  }, function (){
    return i;
  }, function (){
    return i;
  }, function (){
    return i;
  }]

但是如果写成以下形式，就成功了：

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

输出：

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

为什么上面第一个例子中的匿名函数不执行呢？

Answer 1

函数不调用怎么会执行呢

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

这样就执行了

Answer 2

第一个例子中

result[i] = function() {
  return i;
};

将数组 result 中的每个元素设为匿名函数，注意这里并没有立即调用该匿名函数，log 出来后当然是函数数组而不是数字数组咯。

所以， -- '为什么上面第一个例子中的匿名函数不执行呢？'

回答：因为代码里就没有让它们执行啊（对比例2 特意调用 indexNum() 函数得到循环时的索引 i）

Answer 3

题主第一个例子只是定义了函数并且传递给数组的第i个元素, 并没有执行, 所以输出的是每个函数的定义组成的数组. 如果想要立刻执行, 可以采用立刻执行表达式的写法:

(function () {
    // do something
})();

上面的语句相当于执行了以下语句:

function Foo() {
    // do something
}
foo();

---

update: 2017-1-12 20:59:25
所以改正成下面这样子即可:

function createFunctions() {
  let result = new Array();  // 个人比较喜欢用let代替var
  
  for (let i = 0; i < 10; i += 1) {
    // 注意: 这里改成立刻执行表达式了!
    result[i] = (function () {
      return i;
    })();
  }
  
  return result;
}

console.log(createFunctions());

答主一开始以为上述代码会报错的时候, 竟然成功执行了!, 其实能执行的原因很简单, result[i]所指向的函数找不到表示符i, 于是就往外一层找, 也就是for里面的i了, 作用域关系如下:

createFunction()
    |-- result
    |-- for
        |-- i  // 实际上引用的标识符i是这个
        |-- result[i] = function () {}  // 这是没有传参的子函数
            |-- i  // 没用声明, 找外面一层作用域的i

也可以像@magicianShiro的答案那样, 传入参数后再使用:

function createFunctions() {
  let result = new Array();  // 个人比较喜欢用let代替var
  
  for (let i = 0; i < 10; i += 1) {
    // 注意: 这里改成立刻执行表达式了!
    result[i] = (function (i) {
      return i;
    })(i);
  }
  
  return result;
}

console.log(createFunctions());

此时作用域和实际调用就会变成这样子了:

createFunction()
    |-- result
    |-- for
        |-- i  // 局部屏蔽外层原则, 没有使用
        |-- result[i] = function (i) {}  // 这是有传参的子函数
            |-- i  // 使用的参数传入的i

Answer 4

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

执行这段代码返回的result是一个函数数组

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

执行这段代码返回的result才是普通的数字数组，重点在for循环里的自执行函数