JavaScript立即调用函数

JavaScript立即调用函数

立即调用函数表达式（Immediately Invoked Function Expression, IIFE） 是 JavaScript 中一种定义并立即执行函数的语法。IIFE 通常用于创建一个独立的作用域，避免变量污染全局命名空间。

1. IIFE 的基本语法

(1) 语法结构

• 将函数定义包裹在括号中，然后立即调用。
• 语法：(function() { ... })();

示例：

(function() {
  console.log('IIFE executed');
})();
// 输出：IIFE executed

(2) 带参数的 IIFE

• 可以向 IIFE 传递参数。

示例：

(function(name) {
  console.log(`Hello, ${name}`);
})('John');
// 输出：Hello, John

2. IIFE 的作用

(1) 创建独立作用域

• IIFE 可以创建一个独立的作用域，避免变量污染全局命名空间。

示例：

(function() {
  const localVar = '局部变量';
  console.log(localVar); // 输出：局部变量
})();
console.log(localVar); // 报错：ReferenceError: localVar is not defined

(2) 避免变量冲突

• 在模块化开发中，IIFE 可以避免不同模块之间的变量冲突。

示例：

// 模块 1
(function() {
  const name = 'Module 1';
  console.log(name);
})();

// 模块 2
(function() {
  const name = 'Module 2';
  console.log(name);
})();

(3) 初始化代码

• IIFE 可以用于初始化代码，确保代码在定义后立即执行。

示例：

(function() {
  const config = {
    apiUrl: 'https://api.example.com',
    timeout: 5000
  };
  console.log('Initialized with config:', config);
})();

3. IIFE 的变体

(1) 箭头函数 IIFE

• 使用箭头函数定义 IIFE。

示例：

(() => {
  console.log('Arrow function IIFE');
})();

(2) 返回值

• IIFE 可以返回一个值，赋值给变量。

示例：

const result = (function() {
  return 'IIFE result';
})();
console.log(result); // 输出：IIFE result

4. IIFE 的现代替代方案

(1) 块级作用域

• 使用 let 或 const 创建块级作用域，替代 IIFE。

示例：

{
  const localVar = '局部变量';
  console.log(localVar); // 输出：局部变量
}
console.log(localVar); // 报错：ReferenceError: localVar is not defined

(2) 模块化

• 使用 ES6 模块（import/export）替代 IIFE。

示例：

// module.js
const name = 'Module';
export default name;

// main.js
import name from './module.js';
console.log(name); // 输出：Module

总结

特性	描述	示例
语法	(function() { ... })();	(function() { console.log('IIFE'); })();
作用	创建独立作用域，避免变量污染	(function() { const x = 10; })();
变体	箭头函数 IIFE、返回值	(() => console.log('IIFE'))();
替代方案	块级作用域、ES6 模块	{ const x = 10; }

IIFE 是 JavaScript 中一种常用的模式，适用于创建独立作用域和初始化代码。在现代开发中，可以使用块级作用域或模块化替代 IIFE。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github