立即执行函数

立即执行函数（Immediately Invoked Function Expression, IIFE）是一种在定义时立即执行的函数表达式。IIFE 通常用于创建一个独立的作用域，以避免变量污染全局作用域，并且可以用来封装一些临时使用的代码。

基本语法

IIFE 的基本语法是将一个函数表达式放在一对括号中，然后立即调用它。常见的写法有以下几种：

1. 标准形式：

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

2. 带参数的形式：

   (function (param1, param2) {
     // 函数体
   })(arg1, arg2);

3. 使用 + 或 - 操作符来触发解析器：

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

4. 箭头函数形式（ES6+）：

   (() => {
     // 函数体
   })();

使用场景

1. 创建私有作用域：

   • 避免变量和函数名污染全局作用域。

   (function () {
     var privateVar = "I'm private";
     function privateFunc() {
       console.log(privateVar);
     }
     privateFunc(); // 输出: I'm private
   })();
   
   // 在这里访问 privateVar 或 privateFunc 会导致 ReferenceError
   // console.log(privateVar);  // ReferenceError: privateVar is not defined
   // privateFunc();  // ReferenceError: privateFunc is not defined

2. 模块化：

   • 将相关功能封装在一个独立的作用域中，模拟模块化编程。

   (function () {
     var moduleVar = "Module variable";
   
     function moduleFunc() {
       console.log(moduleVar);
     }
   
     window.moduleFunc = moduleFunc; // 将模块函数暴露给全局
   })();
   
   moduleFunc(); // 输出: Module variable

3. 初始化操作：

   • 在页面加载时执行一些初始化操作。

   (function () {
     var initMessage = "Initializing...";
     console.log(initMessage);
   
     // 初始化代码
   })();

4. 传入参数：

   • 可以传递参数给 IIFE，以便在函数内部使用这些参数。

   (function (name) {
     console.log("Hello, " + name + "!");
   })("Alice"); // 输出: Hello, Alice!

5. 闭包：

   • 利用闭包来保存状态或创建私有数据。

   var counter = (function () {
     var count = 0;
   
     return function () {
       count++;
       return count;
     };
   })();
   
   console.log(counter()); // 输出: 1
   console.log(counter()); // 输出: 2

总结

IIFE 是一种非常有用的模式，可以帮助你创建独立的作用域，避免全局命名空间污染，并且可以用于各种初始化和模块化的需求。通过理解 IIFE 的工作原理和使用方法，你可以更好地组织和管理你的 JavaScript 代码。如果你有更多关于 IIFE 的具体问题或需要进一步的例子，请告诉我！

应用场景

主要用于创建独立的作用域、避免全局变量污染、模块化代码以及执行初始化操作。以下是一些常见的应用场景：

1. 创建私有作用域

IIFE 可以用来创建一个独立的作用域，防止变量和函数名污染全局命名空间。

(function () {
  var privateVar = "I'm private";
  function privateFunc() {
    console.log(privateVar);
  }
  privateFunc(); // 输出: I'm private
})();

// 在这里访问 privateVar 或 privateFunc 会导致 ReferenceError
// console.log(privateVar);  // ReferenceError: privateVar is not defined
// privateFunc();  // ReferenceError: privateFunc is not defined

2. 模块化

IIFE 可以用来封装相关功能，模拟模块化编程，将一些公共方法或数据暴露给外部使用。

var myModule = (function () {
  var moduleVar = "Module variable";

  function moduleFunc() {
    console.log(moduleVar);
  }

  return {
    publicFunc: moduleFunc,
  };
})();

myModule.publicFunc(); // 输出: Module variable

3. 初始化操作

IIFE 可以用于页面加载时执行一些初始化操作，确保这些操作只执行一次。

(function () {
  var initMessage = "Initializing...";
  console.log(initMessage);

  // 初始化代码
  document.getElementById("myButton").addEventListener("click", function () {
    console.log("Button clicked!");
  });
})();

4. 传入参数

IIFE 可以接受参数，以便在函数内部使用这些参数进行初始化或配置。

(function (config) {
  var appName = config.appName;
  var appVersion = config.appVersion;

  console.log(`App Name: ${appName}, Version: ${appVersion}`);

  // 其他初始化代码
})({
  appName: "My App",
  appVersion: "1.0.0",
});

5. 闭包

IIFE 可以用来创建闭包，保存状态或创建私有数据。

var counter = (function () {
  var count = 0;

  return function () {
    count++;
    return count;
  };
})();

console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2

6. 避免重复执行

IIFE 可以确保某些代码只执行一次，避免重复执行带来的问题。

(function () {
  if (!window.mySingleton) {
    window.mySingleton = {
      method: function () {
        console.log("Singleton method called");
      },
    };
  }
})();

window.mySingleton.method(); // 输出: Singleton method called

7. 延迟执行

IIFE 可以用来延迟执行某些代码，直到特定条件满足。

(function checkCondition() {
  if (someCondition) {
    console.log("Condition met, executing code...");
    // 执行代码
  } else {
    setTimeout(checkCondition, 1000); // 1秒后再次检查
  }
})();

8. 封装库或框架

IIFE 可以用来封装库或框架，提供一个清晰的接口，并隐藏内部实现细节。

var MyLibrary = (function () {
  var privateVar = "Private variable";

  function privateMethod() {
    console.log("Private method called");
  }

  function publicMethod() {
    console.log("Public method called");
    privateMethod();
  }

  return {
    publicMethod: publicMethod,
  };
})();

MyLibrary.publicMethod(); // 输出: Public method called, Private method called

9. 保护全局对象

IIFE 可以用来保护全局对象，确保不会意外修改全局对象。

(function (global) {
  var myVar = "My variable";

  global.myFunction = function () {
    console.log(myVar);
  };

  // 其他代码
})(this); // `this` 是全局对象，在浏览器中是 `window`，在 Node.js 中是 `global`

myFunction(); // 输出: My variable

总结

IIFE 是一种非常有用的模式，可以帮助你创建独立的作用域、避免全局命名空间污染、进行初始化操作、传递配置参数、创建闭包等。通过理解 IIFE 的工作原理和应用场景，你可以更好地组织和管理你的 JavaScript 代码。如果你有更多关于 IIFE 的具体问题或需要进一步的例子，请告诉我！