立即执行函数,经常使用,但是你确定了解它嘛?
下面,就来看看吧!
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 立场上是没有模块的模仿,可用立即执行函数来模拟模块化
今天的分享就到这,还有关于立即执行函数的其它问题,欢迎提问