manlili blog

立即执行函数IIFE

发表于 | 分类于

为什么使用立即执行函数

IIFE最常用的功能显然是隔离作用域，javascript中没用私有作用域的概念，如果在多人开发的项目上，你在全局或局部作用域中声明了一些变量，可能会被其他人不小心用同名的变量给覆盖掉，根据javascript函数作用域链的特性，可以使用这种技术可以模仿一个私有作用域，用匿名函数作为一个“容器”，“容器”内部可以访问外部的变量，而外部环境不能访问“容器”内部的变量，所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突，俗称“匿名包裹器”或“命名空间”。

在这之前不得不说下函数声明，函数表达式 和匿名函数。

函数声明

使用方法:

1
2
3
function fnName () {
	
};

使用function关键字声明一个函数，再指定一个函数名，叫函数声明。

函数表达式

使用方法:

1
2
3
var fnName = function () {
}

使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。

匿名函数

使用方法:

1
2
3
function () {
}

使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数。匿名函数属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。

三者不同之处

(1)Javascript引擎在解析javascript代码时会函数声明提升（Function declaration Hoisting）当前执行环境（作用域）上的函数声明，而函数表达式必须等到Javascirtp引擎执行到它所在行时，才会从上而下一行一行地解析函数表达式；
(2)函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以fnName()形式调用 ；
(3)匿名函数不能直接使用，后面加括号也不会变成立即执行函数。
以下是两者差别的两个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
fnName();
function fnName(){
	...
}
//正常，因为提升了函数声明，函数调用可在函数声明之前
fnName();
var fnName = function(){
	...
}
//报错，变量fnName还未保存对函数的引用，函数调用必须在函数表达式之后
var fnName = function(){
	alert('Hello World');
}()
//函数表达式后面加括号，当javascript引擎解析到此处时能立即调用函数
function fnName(){
	alert('Hello World');
}();
//报错
function(){
  console.log('Hello World');    
}();
//报错

通过上面的例子我们知道要在函数体后面加括号就能立即调用，则这个函数必须是函数表达式，不能是函数声明，也不能使匿名函数。

那么问题来了，使用哪种立即表达函数比较方便,下面来看几个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function(a){
  console.log(a);   //输出123,使用（）运算符
})(123);
(function(a){
  console.log(a);   //输出1234，使用（）运算符
}(1234));
!function(a){
  console.log(a);   //输出12345,使用！运算符
}(12345);
+function(a){
  console.log(a);   //输出123456,使用+运算符
}(123456);
-function(a){
  console.log(a);   //输出1234567,使用-运算符
}(1234567);
var fn=function(a){
  console.log(a);   //输出12345678，使用=运算符
}(12345678)

为什么这样就能立即执行并且不报错呢？因为在javascript里，括号内部不能包含语句，当解析器对代码进行解释的时候，先碰到了()，然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明。
可以看到输出结果，在function前面加！、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果，而（）、！、+、-、=等运算符，都将函数声明转换成函数表达式，消除了javascript引擎识别函数表达式和函数声明的歧义，告诉javascript引擎这是一个函数表达式，不是函数声明，也不是匿名函数，可以在后面加括号，并立即执行函数的代码，因为加括号是最安全的做法，因为！、+、-等运算符还会和函数的返回值进行运算，有时造成不必要的麻烦。

下面来总结一下立即执行函数最常用的两种表达方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function(接收A, B, ....){
})(待传入的参数A, B, ....)
(function (接收A, B, ....){
}(待传入的参数A, B, ....))
var 变量名i = (function(待传入的参数A, B, ....){
}(待传入的参数A, B, ....))
//或者用下面的方式，但不推荐
var 变量名i = function(待传入的参数A, B, ....){
}(待传入的参数A, B, ....)

关键上面不推荐第三种方式是因为我们在阅读代码的时候，如果function内部代码量庞大，我们不得不滚动到最后去查看function(){}后是否带有()来确定i值是个function还是function内部的返回值。所以为了代码的可读性，请尽量加上()无论是否已经是表达式。

立即执行函数与闭包的暧昧关系

立即执行函数能配合闭包保存状态。

像普通的函数传参一样，立即执行函数也能传参数。如果在函数内部再定义一个函数，而里面的那个函数能引用外部的变量和参数（闭包），利用这一点，我们能使用立即执行函数锁住变量保存状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 并不会像你想象那样的执行，因为i的值没有被锁住
// 当我们点击链接的时候，其实for循环已经执行完了
// 于是在点击的时候i的值其实已经是elems.length了
var elems = document.getElementsByTagName( 'a' );
 
for ( var i = 0; i < elems.length; i++ ) {
 
  elems[ i ].addEventListener( 'click', function(e){
    e.preventDefault();
    alert( 'I am link #' + i );
  }, 'false' );
 
}
 
// 这次我们得到了想要的结果
// 因为在立即执行函数内部，i的值传给了lockedIndex，并且被锁在内存中
// 尽管for循环结束后i的值已经改变，但是立即执行函数内部lockedIndex的值并不会改变
var elems = document.getElementsByTagName( 'a' );
 
for ( var i = 0; i < elems.length; i++ ) {
 
  (function( lockedInIndex ){
 
    elems[ i ].addEventListener( 'click', function(e){
      e.preventDefault();
      alert( 'I am link #' + lockedInIndex );
    }, 'false' );
 
  })( i );
 
}
 
// 你也可以这样，但是毫无疑问上面的代码更具有可读性
var elems = document.getElementsByTagName( 'a' );
 
for ( var i = 0; i < elems.length; i++ ) {
 
  elems[ i ].addEventListener( 'click', (function( lockedInIndex ){
    return function(e){
      e.preventDefault();
      alert( 'I am link #' + lockedInIndex );
    };
  })( i ), 'false' );
 
}

请我喝杯果汁吧！