首页 > 技术文章 > 立即执行函数IIFE

qlongbg 2020-02-20 09:31 原文

立即执行行数顾名思义:

很多时候我们在js中定义一个函数后,而此函数我们需要他在定义的时候便执行,且只需要执行该函数一次,比如数据初始化函数;

这种情况下,定义一个函数就会浪费内存空间,这时我们就可以使用立即执行函数(Immediately-Invoked Function Expression 即IIFE)。
 
 
立即执行函数的常用两种语法:
//匿名函数包裹在一个括号运算符中,后面跟一个小括号
(function(){
    //...
})()

//匿名函数后面跟一个小括号,整个包裹在一个括号运算符中
(function(){
    //...
}())

(),!,+,-,=等运算符都能起到立即执行的作用,这些运算符的作用就是将匿名函数或函数声明转换为函数表达式。

注意两点:

一是函数体后面要有小括号()

二是函数体必须是函数表达式而不能是函数声明

(function (test) {    //使用()运算符,输出12345
    console.log(test);
})(12345);

(function (test) {    //使用()运算符,输出12345
    console.log(test);
}(12345));

!function (test) {    //使用!运算符,输出12345
    console.log(test);
}(12345);

var fn = function (test) {  //使用=运算符,输出12345
    console.log(test);
}(12345);

对于IIFE函数,也可以给它们传入参数,例如:

(function foo(arg1,arg2,...){...}(param1,param2,...));

//对于常见的(function($){...})(jQuery);即是将实参jQuery传入函数function($){},通过形参$接收。

上述函数中,最开始的那个括号,可能会由于js中自动分号插入机制而引发问题。例如:

a  =  b  +  c 
;(function  () { 
  // code 
})();

//如果没有第二行的分号,那么该处有可能被解析为c()而开始执行。所以有的时候,可能会看到这样的写法:;(function foo(){/*...*/}()),前边的分号可以认为是防御型分号。

 

最后,立即执行函数会形成自身独立的命名区域,拥有私有变量,可以避免全局命名空间比污染的问题

 

 
 

推荐阅读