0
点赞
收藏
分享

微信扫一扫

什么是 IIFE ?

IIFE

IIFEImmediately Invoked Function Expression)即立即被调用的函数表达式,是一个在定义时就会立即执行的JS函数。它可以创建一块单独的作用域,防止污染全局作用域。

(function () {
    xxxxx
})();

IIFE主要包含两部分。前面的() 包含的部分是一个函数表达式,后面的()表示执行这个函数。

IIFE有什么用?

IIFE 可以创建一个独立的块级作用域,避免变量被外界访问,防止污染全局作用域。

var a = '张三';
(function IIFE(){
    var a = '法外狂徒';
    console.log( a ); // 法外狂徒
})();

console.log( a ); // 张三

ps: IIFE的名称不是固定的,它可以使任意的,甚至可以没有成为一个匿名函数。

IIFE的其他形式

当然,也有一些人会这么用:

var a = '张三';
(function IIFE(){
    var a = '法外狂徒';
    console.log( a ); // 法外狂徒
}());

console.log( a ); // 张三

就是将用于调用的 () 被移动到用于包装的 ( ) 内部,这么做也是允许的。

IIFE 还有另一种变种,就是将要被执行的函数,在调用和传参之后给出。这种模式更干净和易懂一些,虽然有点儿繁冗。

var a = 2;

(function IIFE( def ){
    def( window );
})(function def( global ){

    var a = 3;
    console.log( a ); // 3
    console.log( global.a ); // 2

});

def 函数表达式在后半部分被定义,然后作为一个参数(也叫 def)被传递给在代码段前半部分定义的 IIFE 函数。最后,参数 def(函数)被调用,并将 window 作为 global 参数传入。

IIFE接收参数

IIFE还可以接收参数:

    var a = '张三';
    (function IIFE(val){
       console.log(val); // 张三
    })(a);

我们传入 a 但将参数命名为 val,这样我们对于全局和非全局引用就有了一个清晰的划分。

利用 IIFE 可以创建单独的作用域,以及可以接收参数。我们可以实现在for循环中,输出1、2、3 、4、5

    for (var i=1; i<=5; i++) {
        (function(i){
            setTimeout( function timer(){
                console.log( i ); 
            }, i*1000 );
        })( i );
    }

   //输出 1 2 3 4 5
举报

相关推荐

0 条评论