立即执行函数(IIFE)

立即执行函数(IIFE)是JavaScript中一种常见的模式，用于创建独立的作用域并立即执行代码。它在模块化开发、避免全局污染等场景中非常实用。

IIFE的基本概念

IIFE全称Immediately Invoked Function Expression，即立即调用的函数表达式。它的核心特点是在定义后立即执行，不需要显式调用。基本语法结构如下：

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

或者：

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

这两种写法在功能上完全等效，区别仅在于括号的位置。IIFE创建了一个独立的作用域，内部变量不会泄露到外部。

IIFE的工作原理

IIFE之所以能够立即执行，是因为它将函数声明转换为函数表达式。在JavaScript中，函数声明不能直接调用，但函数表达式可以。通过将函数包裹在括号中，解释器会将其视为表达式而非声明。

// 函数声明 - 不能立即调用
function foo() { console.log('声明'); }

// 函数表达式 - 可以立即调用
(function foo() { console.log('表达式'); })();

IIFE的常见用途

创建私有作用域

IIFE最常见的用途是创建独立的作用域，避免变量污染全局命名空间：

(function() {
  var privateVar = '私有变量';
  console.log(privateVar); // '私有变量'
})();

console.log(typeof privateVar); // 'undefined'

模块模式

IIFE是实现模块模式的基石，可以创建具有私有成员的模块：

var counter = (function() {
  var count = 0;
  
  return {
    increment: function() {
      return ++count;
    },
    decrement: function() {
      return --count;
    },
    getCount: function() {
      return count;
    }
  };
})();

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

解决循环变量问题

在循环中使用IIFE可以解决经典的闭包问题：

for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 1000);
  })(i);
}
// 输出: 0, 1, 2, 3, 4 (间隔1秒)

参数传递

IIFE可以接收外部参数：

(function(window, document, undefined) {
  // 使用window和document
  console.log(window === window); // true
})(window, document);

IIFE的变体形式

箭头函数IIFE

ES6引入箭头函数后，IIFE有了更简洁的写法：

(() => {
  console.log('箭头函数IIFE');
})();

一元运算符IIFE

使用一元运算符也可以创建IIFE：

!function() {
  console.log('使用!运算符');
}();

+function() {
  console.log('使用+运算符');
}();

赋值表达式IIFE

通过赋值操作创建IIFE：

var result = function() {
  return '返回值';
}();

console.log(result); // '返回值'

IIFE与模块系统

在现代JavaScript中，虽然ES6模块已成为标准，但理解IIFE对理解模块系统很有帮助：

// 模拟ES6模块
var MyModule = (function() {
  var privateVar = '私有';
  
  function privateFn() {
    return privateVar;
  }
  
  return {
    publicFn: function() {
      return privateFn();
    }
  };
})();

console.log(MyModule.publicFn()); // '私有'

IIFE的性能考量

IIFE的执行效率通常很高，因为它只执行一次。但在某些情况下需要注意：

// 低效的IIFE使用
for (var i = 0; i < 10000; i++) {
  (function() {
    // 每次循环都创建新的函数作用域
  })();
}

// 更高效的做法
var fn = (function() {
  // 共享的逻辑
  return function() {
    // 具体操作
  };
})();

for (var i = 0; i < 10000; i++) {
  fn();
}

IIFE在现代开发中的位置

随着let/const和块级作用域的普及，IIFE的部分用途可以被替代：

// 使用块级作用域替代IIFE
{
  let privateVar = '私有';
  console.log(privateVar);
}

但在需要立即执行复杂逻辑或创建闭包时，IIFE仍然很有价值：

// 仍然有用的场景
const uniqueId = (function() {
  let id = 0;
  return function() {
    return id++;
  };
})();

console.log(uniqueId()); // 0
console.log(uniqueId()); // 1

IIFE的调试技巧

调试IIFE时，可以添加调试标识：

(function debugIIFE() {
  // 在调用栈中会显示debugIIFE
  debugger;
  console.log('调试中');
})();

IIFE与this绑定

IIFE中的this值需要注意：

(function() {
  console.log(this); // 浏览器中通常是window
})();

var obj = {
  method: function() {
    (function() {
      console.log(this); // 仍然是window
    })();
  }
};
obj.method();

可以使用call或apply改变this：

(function() {
  console.log(this); // {name: 'obj'}
}).call({name: 'obj'});

IIFE的错误处理

在IIFE中添加错误处理：

(function() {
  try {
    // 可能出错的代码
    undeclaredVar;
  } catch(e) {
    console.error('IIFE内部错误:', e);
  }
})();

IIFE与异步代码

IIFE在处理异步代码时特别有用：

(function() {
  var data = '初始数据';
  
  setTimeout(function() {
    console.log(data); // 闭包保持data的引用
  }, 1000);
})();

IIFE的高级模式

链式IIFE

通过返回函数实现链式调用：

var calculator = (function() {
  var result = 0;
  
  return {
    add: function(x) {
      result += x;
      return this;
    },
    subtract: function(x) {
      result -= x;
      return this;
    },
    value: function() {
      return result;
    }
  };
})();

console.log(
  calculator.add(5).subtract(2).value() // 3
);

条件IIFE

根据条件执行不同的IIFE：

var mode = 'dev';

(function() {
  if (mode === 'dev') {
    console.log('开发模式');
  } else {
    console.log('生产模式');
  }
})();

IIFE与库开发

许多JavaScript库使用IIFE作为包装器：

// 模拟jQuery的IIFE
(function(global, factory) {
  if (typeof module === 'object' && typeof module.exports === 'object') {
    // CommonJS环境
    module.exports = factory(global, true);
  } else {
    // 浏览器环境
    factory(global);
  }
}(typeof window !== 'undefined' ? window : this, function(window, noGlobal) {
  // 库的实际代码
  var MyLib = {};
  
  if (!noGlobal) {
    window.MyLib = MyLib;
  }
  
  return MyLib;
}));

IIFE的替代方案

虽然IIFE很有用，但在现代JavaScript中，可以考虑其他方案：

// 使用块级作用域
{
  let private = '变量';
  console.log(private);
}

// 使用ES6模块
// module.js
let private = '变量';
export function publicFn() {
  return private;
}

// 使用类
class MyClass {
  #privateField = '私有字段';
  
  publicMethod() {
    return this.#privateField;
  }
}