闭包的理解
直接上案例，是摘自《javascript面向对象编程》中的一个案例。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1 id="h1"> 这里一共创建了3个闭包，他们都指向了一个共同的局部变量i。但是闭包并不会记录他们（变量i）的值，他们（变量i）所拥有的只是一个一个i的链接（即引用），因此只能返回i的当前值。由于循环结束时i=3，所以这三个函数都指向了这一共同值。 </h1> </body> <script> function f1() { var a = []; var i; for(i=0;i<3;i++) { a[i] = function () { return i; } } return a; } var a = f1(); console.log(a[0]());// 3 console.log(a[1]());// 3 console.log(a[2]());// 3 // 解决办法1： // 不直接创建一个返回i的函数，二十将i传递给一个自调函数。 // 在该函数中，i 就被赋值给了一个局部变量x，这样一来，每次迭代中的x就会拥有各自不同的值了 // 实现的关键，是在中间函数内，将i的值“本地化”，存储到本地，中间函数的参数也是本地化数据 // 下面函数f2最终 return 的是x，x 是函数b[i]的形参，形参是存储b[i]作用域的，当被传入实参i的时候，x分别是1,2,3，return 的也是传入的实参 1，2,3，只要将 i 的值传入函数b[i],i 与函数 f2的 返回值就没有直接关联了。 function f2() { var b= []; var i; for(i= 0;i<3;i++) { b[i] = (function(x){ return function() { return x } })(i) } return b; } var b = f2(); console.log(b[0]());// 0 console.log(b[1]());// 1 console.log(b[2]());// 2 // 不使用自调函数的写法 function f3() { var b= []; var i; var mkClosure = function (x) { return function () { return x; } } for(i=0;i<3;i++) { b[i] = mkClosure(i) } return b; } var c = f3(); console.log(c[0]());// 0 console.log(c[1]());// 1 console.log(c[2]());// 2 </script> </html>
