秒懂JavaScript：打造高效、封装完美的立即调用函数表达式（IIFE）全攻略！

烛阴2025-04-18 10:53

一、什么是立即调用的函数表达式（IIFE）？

IIFE是一种函数定义后立即执行的代码结构。它在定义完毕后马上调用，从而在作用域内创建私有空间，避免污染全局变量。其基本结构如下：

javascript 复制代码

(function() {
  // 在这里编写代码
})();

或者使用箭头函数：

javascript 复制代码

(() => {
  // 在这里编写代码
})();

二、为什么需要使用IIFE？

变量私有化：防止变量在全局作用域中泄漏，避免命名冲突。
模块化：将代码封装在单独的作用域内，实现逻辑封装。
初始化操作：实现页面加载时的立即初始化功能。

三、IIFE的语法详解

基本格式：

javascript 复制代码

(function() {
  // 代码
})();

外层用括号包裹函数表达式，避免被解析为函数声明。
末尾的()表示立即调用。

传入参数：

可以给IIFE传入参数，增强其灵活性。

javascript 复制代码

(function(name) {
  console.log('Hello, ' + name);
})('World');

使用箭头函数实现IIFE：

javascript 复制代码

(() => {
  console.log('这是一个箭头函数的IIFE');
})();

四、实用示例

变量封装：

javascript 复制代码

var counter = (function() {
  let count = 0; // 私有变量
  return {
    increment: function() {
      count++;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.getCount()); // 1

模块化代码：

javascript 复制代码

const myModule = (function() {
  const privateVar = '秘密数据';

  function privateMethod() {
    console.log('私有方法');
  }

  return {
    publicMethod: function() {
      console.log('公共方法');
      privateMethod();
      console.log(privateVar);
    }
  };
})();

myModule.publicMethod();
// 输出：公共方法
//        私有方法
//        秘密数据