IIFE(立即执行函数)那些事儿

发表于

IIFE(Immediately Invoked Function Expression)是一个定义即运行的JavaScript函数。

它是一种设计模式，是为了做Self-Executing Anonymous Function （自执行匿名函数），并且包含2个主要的部分。
第一个是与特定词法作用域相关的在Grouping Operator()中的匿名函数。这会不能访问IIFE惯用语中的变量，不会污染全局作用域。
第二个部分是创建立即执行函数的表达式（），js引擎通过它直接解析函数。

例子
函数变成一个立即执行的函数表达式。表达式内的变量不能外部获取不到。

1
2
3
4
(function(){
    var aName = "Barry";
})();
aName;//抛出"Uncaght ReferenceError:aName is not defined"

将IIFE返回值分配给一个变量

1
2
3
4
5
var result = (function(){
    var name = "Barry";
    return name;
})();
result;//"Barry"

QA环节：

  • IIFE的两个不同的圆括号中哪一个是Grouping Operator，它的作用是什么？
    1
    2
    3
    4
    (function(){
        var aName = "Barry";
    })();
    aName;//抛出"Uncaght ReferenceError:aName is not defined"

分组操作符（）在表达式中控制评估的优先级。
比如console.log((1 + 2) * 3)；将(1+2)包裹起来，保证输出的不是7，而是9

拿上面的例子来说，将anonymous函数包裹起来的是分组Group Opetator。它可以保证变量只声明在匿名函数内部，不会污染全局的命名空间。

下面代码中function(){}外部的圆括号指的就是Group Operator。

1
2
3
(function(){
    var aName = "Barry";
})

  • IIFE的两个不同的圆括号中不是Grouping Operator的有什么用？
    1
    2
    3
    (function(){
        var aName = "Barry";
    })();

非分组操作符的圆括号，作用是告知浏览器正确解析函数。
说得通俗点，其实就是执行这个函数，就像我们声明了function foo(){}，然后foo()这样。

总结一下：

  • 声明函数
    • 匿名函数function(){}创建函数
    • Group Operator保证了全局命名空间不受污染
  • 执行函数
    • ()保证了引擎正确运行函数

引申环节:

  • IIFE中的this指向谁？
    this指向Window对象。

    1
    2
    3
    4
    (function(){
        var aName = "Barry";
        console.log(this);//Window对象
    })();

  • function可以用箭头函数替代吗？
    亲测可以，不会污染全局命名空间。

    1
    2
    3
    4
    (()=>{
        var aName = "Barry";
    })();
    aName;//抛出"Uncaght ReferenceError:aName is not defined"