我们在很多场景中使用了立即执行函数,或者看到别人写了立即执行函数,但是对它的作用和用法 还有一些疑惑,写这篇文章就是来解决这个问题的。
立即执行函数
IIFE(Immediately-Invoked Function Expression)
立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行。
函数相关的概念
函数声明、函数表达式、匿名函数
函数声明
function func() { console.log(‘this is a function’) };
首先使用 function 关键字声明一个函数,再执行一个函数名,叫函数声明。
函数表达式
let func = function() { console.log(‘this is a function’) };
使用 function 关键字声明一个函数,但未给函数命名,将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。
匿名函数:
function() { console.log(‘this is a function’) } ;
使用 function 关键字声明一个函数,但未给函数命名,所以叫匿名函数,匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。
函数声明和函数表达式区别
1、JavaScript 引擎在解析 JavaScript 代码时会“函数声明提升”当前执行环境(作用域)上的函数声明,而函数表达式必须等到 JavaScript 引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式。
2、函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以 func() 形式调用。
我们看一下下面的例子就会明白
函数声明
func(); //正常输出this is a function
function func() {
console.log('this is a function')
};
函数表达式
func();// Uncaught SyntaxError: Invalid or unexpected token
函数表达式报错,func未保存对函数的引用,函数调用需放在函数表达式后面
var func = function() {
console.log('this is a function')
};
立即执行函数的两种写法
//第一种写法
(function(){
console.log('this is a function')
})();
//第二种写法
(function(){
console.log('this is a 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')
})()
立即执行函数的作用
**创造一个作用域空间,防止变量冲突或覆盖 **
我们下面来看一个精典的面试题
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
输出一个数据,从0-4,按常理会输出//0 1 2 3 4,结果输出了5个5。
这样的需求我们可以用立即执行函数来做,
我们可以把代码稍微改一下可以了,
for (var i = 0; i < 5; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, 1000);
})(i);
}
首先 JS中调用函数传递参数都是值传递 ,所以当立即执行函数执行时,首先会把参数 i 的值复制一份,然后再创建函数作用域来执行函数,循环5次就会创建5个作用域,所以1秒后几乎会同时输出 0 1 2 3 4 。
其实还有其它的方式可以来实现,把原代码中的var改成let(ES6的块级作用域)也是可以正常输出 0 1 2 3 4
for (let i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
立即执行函数的应用场景
1、代码在页面加载完成之后,不得不执行一些设置工作,比如时间处理器,创建对象等等。
2、所有的这些动作只需要执行一次,比如只需要显示一个事件。
3、将代码包裹在它的局部作用域中,不会让任何变量泄漏成全局变量。