JavaScript闭包深入理解 | 吴星喜的博客

什么是闭包

闭包（Closure）是 JavaScript 中一个重要的概念，它是指有权访问另一个函数作用域中变量的函数。更具体地说，闭包是由函数以及创建该函数时的词法环境组合而成的。

简单来说，当一个内部函数被外部引用，并且内部函数可以访问外部函数的变量时，就形成了闭包。

闭包的形成条件

要形成闭包，需要满足以下几个条件：

函数嵌套（一个函数内部定义了另一个函数）
内部函数引用了外部函数的变量
外部函数被执行，并且内部函数被返回或传递给其他作用域
内部函数在外部作用域能够被访问

正例：典型的闭包应用

示例 1：计数器

function createCounter() {
    let count = 0;
    return function () {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

在这个例子中，createCounter函数返回了一个匿名函数，这个匿名函数可以访问并修改外部函数的count变量。即使createCounter函数执行完毕，count变量也不会被销毁，因为它仍然被返回的函数引用。

示例 2：私有变量模拟

function createUser(name) {
    let _name = name;

    return {
        getName: function () {
            return _name;
        },
        setName: function (newName) {
            _name = newName;
        },
    };
}

const user = createUser("张三");
console.log(user.getName()); // "张三"
user.setName("李四");
console.log(user.getName()); // "李四"
// 无法直接访问 _name 变量

通过闭包，我们可以创建私有变量_name，只能通过特定的方法来访问和修改，实现了数据的封装。

反例：不构成闭包的情况

示例 1：没有变量引用

function outer() {
    let message = "Hello";

    function inner() {
        console.log("World");
    }

    return inner;
}

const fn = outer();
fn(); // 输出 "World"，但没有访问outer的变量，不构成闭包

虽然这个例子中内部函数被返回并在外部调用，但由于内部函数没有引用外部函数的任何变量，所以不构成严格意义上的闭包。

示例 2：直接执行，没有外部引用

function outer() {
    let count = 0;

    function inner() {
        count++;
        console.log(count);
    }

    inner(); // 直接执行
}

outer(); // 1
outer(); // 1

这种情况下，每次调用outer()都会创建新的作用域，count变量不会在多次调用间保持，因此不构成闭包。

不形成闭包的情况

普通函数调用：函数执行完毕后，其作用域中的变量会被销毁
没有变量捕获：内部函数没有引用外部函数的变量
没有外部引用：内部函数没有在外部作用域中被引用

闭包的使用场景

1. 模块模式

const myModule = (function () {
    let privateVar = 0;

    function privateFunction() {
        console.log("这是私有函数");
    }

    return {
        publicVar: 1,
        publicFunction: function () {
            privateVar++;
            privateFunction();
            return privateVar;
        },
    };
})();

myModule.publicFunction(); // "这是私有函数"  返回 1

2. 回调函数

function setupTimer() {
    let startTime = Date.now();

    setTimeout(function () {
        let endTime = Date.now();
        console.log(`经过了 ${endTime - startTime} 毫秒`);
    }, 1000);
}

setupTimer();

3. 事件处理器

function attachListeners() {
    let clickCount = 0;

    document.getElementById("button").addEventListener("click", function () {
        clickCount++;
        console.log(`按钮被点击了 ${clickCount} 次`);
    });
}

attachListeners();

4. 函数工厂

function multiplier(factor) {
    return function (number) {
        return number * factor;
    };
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

5. 循环中的闭包解决方案

// 错误示例（经典问题）
for (var i = 0; i < 3; i++) {
    setTimeout(function () {
        console.log(i); // 输出三次 3
    }, 100);
}

// 使用闭包解决
for (var i = 0; i < 3; i++) {
    (function (index) {
        setTimeout(function () {
            console.log(index); // 输出 0, 1, 2
        }, 100);
    })(i);
}