JavaScript的IIFE (立即调用函数表达式)

IIFE(Immediately Invoked Function Expression)指立即调用函数表达式。如下:

(function(){
    // 函数体
})()

也可以使用ES6的箭头函数来简化代码,如下:

(() => {
    // 函数体
})()
  1. 为什么函数体外需要包裹圆括号?
function(){
    // 函数体
}()  //这样写IIFE报错

这是因为JavaScript会把function作为函数声明的开始,而函数声明的结尾是不能跟圆括号的。而用圆括号包裹匿名函数,它就变成了一个函数表达式,函数表达式的结尾是可以跟圆括号的。

  1. IIFE的作用

IIFE具有独立作用域。
在ES6之前,变量用var声明,且没有块级作用域,IIFE利用其独立作用域的特性可以模拟块级作用域。

function log() {
  for (var i = 0; i < 10; i++) {
    console.log(i);
  }
  console.log(i); // 10
}

for循环结束后,变量i没有被销毁,依然可以被访问。如果我们不想让i再被访问到,可以把它包裹在IIFE里面。

function log() {
  (function(){
  	for (var i = 0; i < 10; i++) {
      console.log(i);
  	}
  })();
  console.log(i); // 报错,i is not defined
}

注:这种隔离变量的方式,通常被用在全局作用域中。在全局作用域下声明变量应该尽量避免,特别是在多个开发人员协同开发的时候,所以,每个程序员都需要将自己的代码包裹在IIFE里面,形成私有作用域,防止自己的变量污染全局环境。

  1. ES6引入了块级作用域,IIFE还有存在的必要吗?

你可能感兴趣的:(JavaScript,ES6)