三. 立执行函数

其实, 不管是上述哪种情况, 根本的问题在于 js 中没有块作用域

1 块作用域

由{}形成的作用区域

示例

for (var i = 0; i < 10; i++) {
  console.log(i)
}
console.log('for执行完了, i=' + i)

首先, 我们从预编译的角度来分析一下

1. var i属于变量声明, 会在 window 对象添加一个属性i
2. 执行 for 循环, 没有函数, 不会产生局部作用域, 在 for 循环结束后, i 依然可以访问

一般情况下, 我们更希望循环变量 i 只在循环体内有效, 也就是{}里有效. 这个就是块作用域

如何解决呢

2 立执行函数

由于函数会产生作用域, 我们可以尝试在for循环中写一个函数, 并调用函数

示例

for (var i = 0; i < 10; i++) {
  function a(j) {
    console.log(j)
  }
  a(i)
}

像这种声明了马上执行的函数就是立执行函数, 可以合并写在一起

示例

for (var i = 0; i < 10; i++) {
  ;(function(j) {
    console.log(j)
  })(i)
}

前面的()表示函数的声明

后面的()表示函数的执行

示例

var arr = []
function a() {
  for (var i = 0; i < 10; i++) {
    ;(function(i) {
      arr[i] = function() {
        console.log(i)
      }
    })(i)
  }
}
a()
console.dir(arr)