作用
创造一个作用域空间,防止变量冲突或覆盖.
两种写法
(function (){}()) //W3C推荐写法
(function (){})()
为什么立即执行函数外面要加(),不加可不可以呢,我们来试一下
function(){
console.log('this is a function')
}()
//Uncaught SyntaxError: Function statements require a function name
//报错,意思是函数声明需要一个函数名
虽然匿名函数属于函数表达式,但未进行赋值,所以javascript解析时将开头的function
当做函数声明,故报错提示需要函数名;
立即执行函数里面的函数必须是函数表达式
函数声明和函数表达式区别
let func = function() {
return 1;
}();
console.log(func) //1
为什么给一个匿名函数赋值就可以正常了呢?
匿名函数前加了 “=” 有了运算符后,将函数声明转化为函数表达式。
我们可以理解为在匿名函数前加了 “=” 有了运算符后,将函数声明转化为函数表达式。
我们拿!,+,-,()…等运算符来进行测试:
!function(){
console.log('this is a function1')
}()
// this is a function1
+function(){
console.log('this is a function2')
}()
// this is a function2
-function(){
console.log('this is a function3')
}()
// this is a function3
;(function(){
console.log('this is a function4')
})()
// this is a function4
由此可见,加运算符确实可将函数声明转化为函数表达式
需要注意的地方
注意在代码console.log(‘this is a function4’)
这个函数我在最前面加上了一个“;”(分号) 为什么要加这分号,不加行不行呢,大家可以验证一下。 不加会报错(Uncaught TypeError: (intermediate value)(…) is not a function)
上面的代码有一些多,我们截取一部分来讲
-function(){
console.log('this is a function3')
}()
(function(){
console.log('this is a function4')
})()
这段代码一样会报错,因为ECMAScript规范具有分号自动插入规则,但是在上面代码中,在第一个立即执行函数末尾却不会插入,因为第二个立即执行函数,会被解释为如下形式:
-function(){
console.log('this is a function3')
}()(function(){console.log('this is a function4')})()
因此我们在最后一个立即执行函数前面加一个分号;(是为了防止前一个立即函数尾部没有的分号;) 其实还有其它的方式也可以实现,使用void 运算符,个人感觉这种方式更优雅
-function(){
console.log('this is a function3')
}()
void (function(){
console.log('this is a function4')
})()
立即执行函数的应用场景
1、代码在页面加载完成之后,不得不执行一些设置工作,比如时间处理器,创建对象等等.
2、所有的这些动作只需要执行一次,比如只需要显示一个事件.
3、将代码包裹在它的局部作用域中,不会让任何变量泄漏成全局变量.
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/xu_song/article/details/107077675