[javascript]你真的知道『立即执行函数』吗？

立即执行函数，经常使用，但是你确定了解它嘛？

下面，就来看看吧！


 
1、定义

立即执行函数，又称IIFE.

Immediately Invoked Funcation Expression

   立即地        调用       （函数       表达式  ）    


注：是函数表达式


2、定义函数的两种方式

1、 函数声明

// 函数声明 !== 函数表达式

function test(){
 console.log('Function declaration');
}

2、函数表达式

把一个（匿名）函数声明式赋值给一个变量的形式，称为函数表达式

var test2 = function(){
 console.log('Function Expression');
}

函数调用

    test();
    test2();

注：（）对于函数名后面的括号，叫做执行符号



3、立即执行函数的使用

声明后，直接加()； 将会报语法错误，执行符号只能跟在函数表达式后面

示例：

function test(){
 console.log('Function declaration');
}()

报错：Uncaught SyntaxError: Unexpected token ')'

原因：立即执行函数 ，是执行函数表达式，而不是函数声明式



4、函数表达式

当一个函数需要立即执行的情况，该函数必须形成函数表达式的形式

以下，都是表达式：

1
(1)
+1
-1
!1
~1

所以，可以使用(),+,-,!,~ 等，将函数声明式变成函数表达式

如下：

var a = function (){
 console.log('Function Expression');
} ();
+function (){
 console.log('Function Expression');
} ();
~function (){
 console.log('Function Expression');
} ();
(function (){
 console.log('Function Expression');
}) ();

5、书写规范

w3c 官网推荐，立即执行函数的编写规范：

(function (){
 console.log('Function Expression');
}());

实践中，一般用下面的方式，因为代码看着比较清晰

(function (){
 console.log('Function Expression');
})();

6、为什么立即执行函数前要加逗号

;(function (){
 console.log('Function Expression');
})();

主要因为，程序员的编程习惯问题，很多程序员，在语句结束末尾不加分号

js中，加上分号才会判断它是个语句，平时我们没有加分号，js会自动为我们加上分号

如：console.log('hahha')

js 解析成 console.log('hahha')；


而括号太多时，js不能正确识别，所以，就要我们自己加分号；

(function (){
 console.log('Function Expression');
}) ()
(function (){
 console.log('Function Expression');
}) ()

上面的代码会


报错：


 Uncaught TypeError: (intermediate value)(...) is not a function
    at <anonymous>:4:1


原因：js不能正确识别这么多括号

加上分号就正确了

(function (){
 console.log('Function Expression');
}) ();
(function (){
 console.log('Function Expression');
}) ();

为防止其它开发者未打分号，导致错误，所以可以在前面加上分号：

;(function (){
 console.log('Function Expression');
}) ();

7、立即执行函数有独立作用域

也可以传参, 也可以给函数取名：

;(function test(a,b,c,d){
    console.log(test);
    console.log(test.length);
}) (1,2,3)；
test()

外部调用test();

 报错：
   VM97:1 Uncaught ReferenceError: test is not defined
    at <anonymous>:1:1


原因：立即执行函数的作用域是独立的。且函数名不能在外部使用


8、立即执行函数的好处

1、可以创建一个与外界没有任何关联的作用域，独立作用域

2、执行完成后，自动销毁

3、ES3 ES5 立场上是没有模块的模仿，可用立即执行函数来模拟模块化


今天的分享就到这，还有关于立即执行函数的其它问题，欢迎提问

---