javascript:立即执行函数表达式(IIFE)

361 阅读2分钟

在认识IIFE之前先了解一下创建函数的两种方法:函数表达式/函数声明

函数声明(function declaration)

function test(){
    //函数内容
}
test();

Function Declaration 可以定义命名的函数变量,而无需给变量赋值。
必要条件:

  • 必须始终带有一个标识符(Identifier),也就是我们所说的函数名相当于一个变量;
  • 就像 Variable Declaration声明变量 必须以'var'开头一样,Function Declaration函数声明必须以“function”开头;

函数表达式(function expression)

Function Expression 将函数定义为表达式语句(通常是变量赋值)的一部分。Function Expression 不能以“function”开头.
通过 Function Expression 定义的函数可以是命名的,也可以是匿名的。
以下是匿名函数表达式:

var test=function(){
    //函数内容
}
test();

以下是命名函数表达式:

var sub = function f(a1,a2){
    return a1-a2;
}
console.log(f(5,3));   //错误调用方式
console.log(sub(5,3));   //正确调用方式

在这个例子中,函数表达式的名称为f,这个名称f实际上变成了函数内部的一个局部变量,并且指代函数对象本身,在函数递归的时候有很大用处。


立即执行函数表达式(IIFE)

释义:定义函数之后,立即调用该函数,这种函数就被称作立即执行函数,全称为立即调用的函数表达式 IIFE=Imdiately Invoked Function Expression
函数表达式通过末尾的() 来调用并运行就是一个IIFE。
常用写法:

(function(){ /* code */ }()); 
(function(){ /* code */ })();
void function(){  /* code */  };  

其他写法:

var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

new function(){ /* code */ };
new function(){ /* code */ }();

这么写的原因?

不让function出现在行首,让引擎将其理解成一个表达式
(javascript引擎规定,如果function关键字出现在行首,一律解释成函数声明语句)

IIFE作用
IIFE的目的是为了隔离作用域,防止污染全局命名空间。

参考:
JavaScript中函数声明与函数表达式的区别详解
JavaScript 函数表达式
理解 JavaScript(二)(关于理解函数作用域和变量/对象提升的一篇文章)
说一说JS的IIFE关于IIFE解释比较简洁易懂
IIFE对IIFE写法的性能及最佳实践有所举例
深入理解闭包系列第三篇——IIFE
JavaScript:立即执行函数表达式(IIFE)一篇译文
立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( )) 有什么区别?
JavaScript的()()原理是什么 汤姆大叔javascript深入理解