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

2022-07-22 14:36:34 浏览数 (4)

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

下面,就来看看吧!

1、定义

立即执行函数,又称IIFE.

Immediately Invoked Funcation Expression

立即地 调用 (函数 表达式

注:是函数表达式

2、定义函数的两种方式

1、 函数声明

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

代码语言:javascript复制
function test(){
 console.log('Function declaration');
}

2、函数表达式

把一个(匿名)函数声明式赋值给一个变量的形式,称为函数表达式

代码语言:javascript复制
var test2 = function(){
 console.log('Function Expression');
}

函数调用

test();

test2();

注:()对于函数名后面的括号,叫做执行符号

3、立即执行函数的使用

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

示例:

代码语言:javascript复制
function test(){
 console.log('Function declaration');
}()

报错:Uncaught SyntaxError: Unexpected token ')'

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

4、函数表达式

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

以下,都是表达式:

1

(1)

1

-1

!1

~1

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

如下:

代码语言:javascript复制
var a = function (){
 console.log('Function Expression');
} ();


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


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


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

5、书写规范

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

代码语言:javascript复制
(function (){
 console.log('Function Expression');
}());

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

代码语言:javascript复制
(function (){
 console.log('Function Expression');
})();

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

代码语言:javascript复制
;(function (){
 console.log('Function Expression');
})();

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

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

如:console.log('hahha')

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

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

代码语言:javascript复制
(function (){
 console.log('Function Expression');
}) ()
(function (){
 console.log('Function Expression');
}) ()

上面的代码会

报错:Uncaught TypeError: (intermediate value)(...) is not a function

at <anonymous>:4:1

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

加上分号就正确了

代码语言:javascript复制
(function (){
 console.log('Function Expression');
}) ();
(function (){
 console.log('Function Expression');
}) ();

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

代码语言:javascript复制
;(function (){
 console.log('Function Expression');
}) ();

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

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

代码语言:javascript复制
;(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 立场上是没有模块的模仿,可用立即执行函数来模拟模块化

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

0 人点赞