深入理解 JavaScript 立即执行函数表达式(IIFE)

訾博ZiBo

发布于 2025-01-13 08:15:14

12200

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

深入理解 JavaScript 立即执行函数表达式(IIFE)

什么是 IIFE?

IIFE(Immediately Invoked Function Expression)是一种 JavaScript 函数的写法,这种函数在定义后立即执行。它的基本语法是:

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

IIFE 的组成部分

一个 IIFE 主要包含三个部分:

第一个括号 () 包裹函数定义,将函数声明转换为表达式
函数体部分包含实际要执行的代码
最后的括号 () 用于立即调用这个函数

为什么要使用 IIFE?

1. 创建独立的作用域

// 不使用 IIFE
var name = "全局变量";
console.log(name); // "全局变量"

// 使用 IIFE
(function() {
    var name = "局部变量";
    console.log(name); // "局部变量"
})();

console.log(name); // "全局变量"

2. 避免全局作用域污染

// 不好的做法
var counter = 0;
function increment() {
    counter++;
}

// 使用 IIFE 的好做法
var counter = (function() {
    var count = 0;
    return {
        increment: function() {
            count++;
            return count;
        }
    };
})();

3. 模块化开发

var module = (function() {
    // 私有变量
    var privateVar = "我是私有的";
    
    // 私有方法
    function privateFunction() {
        return privateVar;
    }
    
    // 返回公共接口
    return {
        publicMethod: function() {
            return privateFunction();
        }
    };
})();

IIFE 的不同写法

1. 基础写法

(function() {
    console.log("基础IIFE");
})();

2. 带参数的 IIFE

(function(name) {
    console.log("你好, " + name);
})("张三");

3. 返回值的 IIFE

var result = (function() {
    return "IIFE的返回值";
})();

4. 箭头函数形式

(() => {
    console.log("使用箭头函数的IIFE");
})();

IIFE 的实际应用场景

1. 初始化代码

(function() {
    // 页面初始化代码
    document.querySelector('#app').style.display = 'block';
    loadConfig();
    setupEventListeners();
})();

2. 避免命名冲突

(function($) {
    // 这里的 $ 就是 jQuery
    $('.myButton').click(function() {
        // 处理点击事件
    });
})(jQuery);

3. 创建私有变量

const counter = (function() {
    let count = 0;  // 私有变量
    
    return {
        increment() {
            return ++count;
        },
        getCount() {
            return count;
        }
    };
})();