立即执行函数表达式(自执行函数)
立即执行函数表达式
立即执行函数表达式,大部分人也称为自执行函数。
自执行函数的写法
匿名函数
(function(){
console.log(2)
})()
具名函数
(function log(){
console.log(2)
})()
自执行函数的传参
(function add(a, b){
console.log(a + b)
})(1,2)
返回值
let fn = (function add(a,b){
return a + b;
})(2,4);
console.log(fn)
自执行函数也可以传递函数作为参数
var a = 2;
(function log(fn){
fn(window)
})(function fn(global){
var a = 3;
console.log(a); // 3
console.log(global.a); // 2
});
为什么要使用立即执行函数表达式
function add(a, b){
var c = 2;
console.log(a + b);
}
add(1,2);
有些时候我们要实现需求,为了实现这些业务逻辑,为了不让变量污染全局环境,定义了函数,但是这些函数,却不是等待调用的,程序一启动,那些函数也跟着执行,但像上面的代码,尽管函数里面的变量是没有污染全局,但add
这个函数名变量,却还是污染了全局,有点不美,所以使用立即执行函数表达式就能解决这种情况。
(function add(a, b){
var c = 2;
console.log(a + b);
})(1,2)
注意事项
虽说javaScript
的分号是可有可无的,但有些时候还是必要的。
console.log(5)
(function add(a, b){
var c = 2;
console.log(a + b);
})(1,2)
上面代码会报错,因为javaScript
确实是有分号这个规则的,代表着语句的结束。
这种时候加个分号就行了
console.log(5);
(function add(a, b){
var c = 2;
console.log(a + b);
})(1,2)
但是很多时候我们已经习惯不加分号了,显得比较麻烦,这种时候就要知道,什么情况下该加分号。
只要语句开头是括号,方括号,正则开头的斜杠,加号,减号的情况下,在前面加分号就行了,当然也可以加别的符号,比如感叹号,不过一般都是加分号
console.log(5)
;(function add(a, b){
var c = 2;
console.log(a + b);
})(1,2)
!(function add(a, b){
console.log(a * b);
})(3,2)
在对象里使用自执行函数
var a = 5
var obj = {
a: 1,
b: function(){
console.log(this.a)// 5
}(),
c: 4
}
var a = 5
var obj = {
a: 1,
b: +function(){
console.log(this.a)// 5
}(),
c: 4
}
以上两种都可以,但需要注意的是对象里的立即执行表达式改变了原本this
的指向,这时的this
是window
var a = 5
var obj = {
a: 1,
b: function(){
console.log(this.a)// 1
},
c: 4
}
obj.b()
这种时候,this
是指向obj