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

1,473 阅读1分钟

IIFE( 立即调用函数表达式)是一个在定义时就会立即执行的 JavaScript 函数。

const name = (function(){
  const name = 'Anonymouse';
  return name;
})();

console.log(name); // Anonymouse

这是一个被称为 自执行匿名函数 的设计模式,主要包含两部分。第一部分是包围在 圆括号运算符 () 里的一个匿名函数,这个匿名函数拥有独立的词法作用域。这不仅避免了外界访问此 IIFE 中的变量,而且又不会污染全局作用域。

其又可以叫做自调用匿名函数,因为它可以自己调用自己且可以携带参数:

const name = (function(name) {
  console.log(name);
})('Anonymouse');

// Anonymouse

第二部分再一次使用 () 创建了一个立即执行函数表达式,JavaScript 引擎到此将直接执行函数。

在写立即调用函数表达式的时候需要注意一个问题,那就是在立即调用函数表达式之前必须使用分号结束上一个表达式,不然会报错。

console.log('Hello World!')

(function() {
  console.log('Anonymouse');
})()

/* 报错如下:
(function() {
^

TypeError: console.log(...) is not a function
    at Object.<anonymous> (C:\Users\ultravires\Desktop\JS\index.js:4:1)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
    at startup (internal/bootstrap/node.js:285:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
*/

但是如果将立即执行函数表达式赋值给一个变量就可以避免这个问题:

console.log('Hello World!')

const name = (function() {
  console.log('Anonymouse');
})()

// Hello World!
// Anonymouse