如何用立即执行函数 IIFE 创建独立的沙盒运行环境-js教程-PHP中文网

IIFE 能隔离变量作用域，是因为它利用函数作用域切断外部污染，使内部声明的 var、let、const 等不泄漏到外层；必须用括号等使其成为函数表达式，否则会被解析为不可立即调用的函数声明。

为什么 IIFE 能隔离变量作用域

iife 的核心价值不是“执行”，而是利用函数作用域切断与外部的变量污染。javascript 中只有函数能创建新的作用域（es6 之前），(function(){})() 这种写法让内部声明的 var、function、甚至 let/const（在块级 iife 中）不会泄漏到全局或外层作用域。

常见错误是漏掉外层括号，写成 function(){/*...*/}() —— 这会被解析为函数声明语句，而函数声明不能立即调用，会报 Uncaught SyntaxError: Unexpected token '('。

必须包裹：用 (...) 或 !function(){...}() 等方式让 JS 引擎识别为函数表达式
参数可选：可以传入 window、document、undefined 等作为形参，避免内部访问时层层向上查找
注意 this：非严格模式下，IIFE 内部 this 指向 window；严格模式下为 undefined，需显式绑定

如何用 IIFE 模拟模块沙盒并安全暴露接口

真实项目中，IIFE 常用于封装第三方脚本、插件初始化逻辑或微前端子应用入口，目标是“进得来、出得去、不打架”。关键不是隐藏所有东西，而是控制哪些能被外部访问。

典型模式是返回一个对象，只暴露必要 API：

(function(global, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof module !== 'undefined' && module.exports) {
    module.exports = factory();
  } else {
    global.MyLib = factory();
  }
})(typeof window !== 'undefined' ? window : this, function() {
  var privateVar = 'secret';
  function privateHelper() { return privateVar.length; }
  return {
    version: '1.0.0',
    publicMethod: function() {
      return privateHelper() + ' exposed';
    }
  };
});

global 参数确保在 Node.js 或 Web Worker 中也能运行，避免硬写 window
末尾的 factory() 立即执行，返回值才是对外暴露的接口，内部变量无法从外部访问
不要在 IIFE 内修改 global 上已存在的属性（如覆盖 Array.prototype.map），否则影响其他代码

IIFE 在现代环境中的兼容性与替代风险

ES6 模块（import/export）和 eval 配合 new Function() 也能实现沙盒，但 IIFE 仍有不可替代场景：比如需要在不支持模块语法的老浏览器中运行，或嵌入 HTML <script></script> 标签的第三方统计代码。

IE8 及以下不支持 JSON.parse，但 IIFE 本身完全兼容 —— 只要语法是 ES3 就行
用 let/const 写 IIFE（如 (() => { ... })()）在 IE11 下会报错，必须用 function 形式
Webpack/Vite 默认打包产物仍大量使用 IIFE（output.libraryTarget: 'iife'），尤其用于 UMD 构建，不是过时技术
滥用 IIFE 套嵌（如五层 (function(){(function(){...})()})()）会导致调试困难，堆栈里全是 anonymous