IIFE 是如何避免污染全局变量的？

2023-11-20 05:11:38

在讨论 IIFE（立即执行函数表达式）时，我们通常关注它的应用，例如模块化和闭包，而较少提及它的另一个关键特性：避免污染全局变量。本文深入探讨 IIFE 的内部机制，揭示它如何实现这一壮举。

IIFE 的本质

IIFE 是一种 JavaScript 函数，它立即执行自身。这可以通过将函数包裹在括号中并紧跟一对圆括号来实现，如下所示：

(function() {
  // 函数体
})();

当执行此代码时，JavaScript 引擎会创建一个新作用域，该作用域与全局作用域分离。函数体中声明的所有变量和函数都包含在新作用域中。

作用域和闭包

JavaScript 中的作用域决定了变量和函数的可访问性。全局作用域是程序中可访问所有变量和函数的顶级作用域。局部作用域是函数内部创建的，它只允许访问该函数中声明的变量和函数。

IIFE 创建了一个局部作用域，该作用域与全局作用域隔离。这意味着 IIFE 内部声明的所有变量和函数都无法从全局作用域访问。相反，IIFE 可以访问全局作用域中的变量和函数，因为局部作用域可以访问外部作用域中的变量和函数。

保护全局变量

IIFE 利用作用域隔离来保护全局变量不被意外更改或覆盖。当一个变量在 IIFE 内部声明时，它只存在于 IIFE 的局部作用域中。这防止了与全局变量同名的变量意外覆盖全局变量。

此外，IIFE 还可以通过返回一个对象来间接访问全局变量。该对象只包含必要的变量，而不会暴露其他全局变量。这进一步增强了全局变量的保护。

代码示例

以下代码示例展示了 IIFE 如何防止全局变量污染：

var globalVariable = "全局变量";

(function() {
  var localVariable = "局部变量";
  console.log(localVariable); // "局部变量"
  console.log(globalVariable); // "全局变量"
})();

console.log(globalVariable); // "全局变量"
console.log(localVariable); // ReferenceError: localVariable is not defined