立即执行函数表达式 (IIFE)模拟模块化开发

小美的打工日记

于 2025-01-23 09:48:46 发布

阅读量520

点赞数 11

文章标签： javascript

版权

IIFE 通常有以下两种常见的书写方式：

示例：

(function() {
  console.log("I am an IIFE!");
})();

或者，也可以写成：

(function() {
  console.log("I am an IIFE!");
}());

这两种写法都是有效的，效果是相同的，函数会在定义时立即执行。

函数表达式：首先，它是一个函数表达式，而不是函数声明。在 JavaScript 中，函数声明和函数表达式的区别在于函数声明（如 function foo() {}）会被提升（hoisting），但函数表达式（如 var foo = function() {}）不会。为了避免函数提升，IIFE 使用了圆括号包裹函数，确保它是一个函数表达式。该函数在定义后立即执行，并且 x 变量只在函数内部有效，不会被提升到外部作用域，通过这种方式，我们避免了全局变量的污染，也确保了代码的执行顺序更清晰、更可控。
立即执行：函数表达式定义之后，通过在函数后面加上圆括号 () 来立即执行该函数。

避免全局作用域污染：使用 IIFE 可以创建一个独立的作用域，避免在全局作用域中定义变量，减少与其他代码的冲突。
```
(function() {
  var privateVariable = "I am private";
  console.log(privateVariable); // 访问私有变量
})();

console.log(privateVariable); // Uncaught ReferenceError: privateVariable is not defined
```
在这个例子中，privateVariable 只在 IIFE 内部可见，外部无法访问它。
模块化开发： IIFE 还可以用于创建模块化代码，尤其在没有模块化机制（如 ES6 模块）的情况下，可以将相关的函数和数据封装在一个独立的作用域内。
```
var counter = (function() {
  var count = 0; // 私有变量
  return {
    increment: function() {
      count++;
      console.log(count);
    },
    decrement: function() {
      count--;
      console.log(count);
    }
  };
})();

counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1
```
通过 IIFE，可以创建一个封装了私有状态（count）的模块，而暴露出来的是 increment 和 decrement 方法。
避免命名冲突：在一些大型的 JavaScript 应用中，可能会有多个脚本文件或库，它们可能定义了相同的变量名。通过 IIFE，可以避免不同作用域中的变量名冲突。
```
var a = 1;
(function() {
  var a = 2; // 内部的 a 不会影响外部的 a
  console.log(a); // 输出 2
})();
console.log(a); // 输出 1
```