在 JavaScript 开发中，我们经常会使用立即执行函数表达式（Immediately Invoked Function Expression，IIFE）来创建一个独立的作用域，避免变量污染和命名冲突。在 ES12 中，IIFE 也有了新的应用方式，本文将介绍 ES12 中 IIFE 的应用和使用方法。
IIFE 的基本用法
在 ES6 之前，我们常常使用 IIFE 来创建一个独立的作用域，例如：
(function() {
var foo = 'bar';
console.log(foo); // 'bar'
})();
console.log(foo); // ReferenceError: foo is not defined在这个例子中，我们使用 IIFE 来创建一个独立的作用域，避免了变量 foo 的污染。当 IIFE 执行完毕后，foo 变量就被销毁了，所以在外层作用域中访问 foo 变量会报错。
IIFE 的新应用：块级作用域
在 ES6 中，我们可以使用 let 和 const 关键字来创建块级作用域。例如：
{
let foo = 'bar';
console.log(foo); // 'bar'
}
console.log(foo); // ReferenceError: foo is not defined在这个例子中，我们使用块级作用域来避免变量 foo 的污染。当块级作用域执行完毕后，foo 变量就被销毁了，所以在外层作用域中访问 foo 变量会报错。
但是，在 ES6 之前，我们无法使用块级作用域来避免变量污染。这时，IIFE 就可以发挥作用了。例如：
(function() {
var foo = 'bar';
console.log(foo); // 'bar'
}());
console.log(foo); // ReferenceError: foo is not defined在这个例子中，我们使用 IIFE 来创建一个块级作用域，避免了变量 foo 的污染。当 IIFE 执行完毕后，foo 变量就被销毁了，所以在外层作用域中访问 foo 变量会报错。
IIFE 的新应用：模块化
在 ES6 中，我们可以使用模块化来组织代码，避免变量污染和命名冲突。例如：
// module.js
export var foo = 'bar';
// main.js
import { foo } from './module.js';
console.log(foo); // 'bar'在这个例子中，我们使用模块化来避免变量 foo 的污染和命名冲突。当模块执行完毕后，foo 变量就被销毁了，所以在外层作用域中访问 foo 变量会报错。
但是，在 ES6 之前，我们无法使用模块化来避免变量污染和命名冲突。这时，IIFE 就可以发挥作用了。例如：
// module.js
(function() {
var foo = 'bar';
window.module = { foo: foo };
}());
// main.js
console.log(module.foo); // 'bar'在这个例子中，我们使用 IIFE 来创建一个独立的作用域，避免了变量 foo 的污染和命名冲突。当 IIFE 执行完毕后，foo 变量就被销毁了，所以在外层作用域中访问 foo 变量不会报错。同时，我们将 foo 变量绑定到了全局对象 window 上，使得其他模块可以通过 window.module.foo 来访问 foo 变量。
IIFE 的使用方法
在 ES12 中，我们可以使用箭头函数来创建 IIFE。例如：
(() => {
var foo = 'bar';
console.log(foo); // 'bar'
})();在这个例子中，我们使用箭头函数来创建 IIFE，并且省略了函数名。同时，我们也可以使用传统的函数声明和函数表达式来创建 IIFE。
总结
在 ES12 中，IIFE 有了新的应用方式，可以用来创建块级作用域和模块化。同时，我们也可以使用箭头函数来创建 IIFE。在 JavaScript 开发中，我们经常需要使用 IIFE 来避免变量污染和命名冲突，所以掌握 IIFE 的使用方法非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6507e9c195b1f8cacd317060