[Effective JavaScript 笔记] 第13条：使用立即调用的函数表达式创建局部作用域

Posted 2020-07-09 脚后跟着猫

function wrapElements(a){

   var res=[],i,n;

   for(i=0,n=a.length;i<n;i++){

        res[i]=function(){return a[i]};

    }

    return res;

}

var wrapped=wrapElements([10,20,30,40,50]);

var f=wrapped[0];

f();//undefined

这个可以由之前的闭包来讲，res里的每个函数都是一个闭包，它们都可以访问上一个函数的作用域内的变量，所以每个函数都可以访问到i,但这个i是for循环运行过的i，它的值应该是a.length。所以f里对应的应该就是a[a.length]，这时数组已经溢出了，所以是undefined。

注意闭包存储的是其外部变量的引用而不是值。

下面这个是一种解决方法

function wrapElements(a){

         var res=[],i,n;

         for(i=0,n=a.length;i<n;i++){

              （function(j){

                       res[j]=function(){return a[j]};

               }）(i)

        }

       return res;

}

var wrapped=wrapElements([10,20,30,40,50]);

var f=wrapped[0];

f();//10

这是使用立即调用的函数表达式或叫IIFE(immediately-invoked function expression)。这是一种解决js缺少块级作用域的方法。

使用IIEF来创建局部作用域注意点：

1. 代码块不能包含任何跳出块的break和continue语句。
2. 如果代码块引用了this或特别的arguments变量，会得到错误的含义。

提示

• 理解绑定与赋值的区别
• 闭包通过引用而不是值捕获它们的外部变量
• 使用立即调用的函数表达式（IIFE）来创建局部作用域
• 当心在立即调用的函数表达式中包裹代码块可能改变其行为的情形