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

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

下面，就来看看吧！

 

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 立场上是没有模块的模仿，可用立即执行函数来模拟模块化

    

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

---

 

苟有恒 , 何必三更眠五更起

关注我，一起学习吧

鼓励一下，赐个赞 和 在看吧