深入理解闭包【JavaScript】

在JavaScript中，闭包是一个强大且广泛使用的概念。它不仅在理论上有其独特的价值，在实际编程中也经常被用来解决各种问题。以下是关于JavaScript闭包的详细阐述：

1. 什么是闭包？

闭包是指一个函数能够记住并访问它的词法作用域，即使这个函数在其词法作用域之外执行。换句话说，闭包让函数可以“记住”创建它的环境。

2. 闭包的结构

闭包通常由两个部分组成：

• 外部函数：包含内部函数的函数。
• 内部函数：返回的函数，它能够访问外部函数的变量。

3. 基本示例

以下是一个简单的JavaScript闭包示例：

function outerFunction() {
    let outerVariable = '外部变量';

    function innerFunction() {
        console.log(outerVariable); // 访问外部变量
    }

    return innerFunction; // 返回内部函数
}

const closure = outerFunction(); // 执行外部函数，返回内部函数
closure(); // 输出 '外部变量'

在这个例子中：

• outerFunction 是外部函数，它定义了一个局部变量 outerVariable。
• innerFunction 是内部函数，它可以访问 outerVariable，即使 outerFunction 已经执行完毕。
• 当 outerFunction 执行时，它返回 innerFunction，并赋值给 closure。
• 调用 closure() 时，outerVariable 的值仍然可以被访问，因为 innerFunction 形成了一个闭包。

 

4. 闭包的工作原理

闭包的实现依赖于JavaScript的词法作用域规则。词法作用域是指变量的作用域在代码编写时确定，而不是在运行时。当一个函数被定义时，它会记录其外部作用域的引用。即使在外部函数执行完毕后，内部函数仍然持有对这些变量的引用。

闭包需要满足以下三个条件：

函数嵌套：	必须在一个函数内部定义另一个函数。闭包的形成需要有一个外部函数和一个内部函数。
访问所在的作用域：	内部函数能够访问外部函数的变量或参数。这意味着内部函数可以使用外部函数作用域中的所有信息。
在所在作用域外被调用：	内部函数可以在外部被调用，即使外部函数已经执行完毕，内部函数仍然可以访问其外部函数的作用域。这是闭包的关键特性。

4.1 函数嵌套

闭包必须在一个函数内部定义另一个函数。这是闭包形成的第一步。

4.2 访问所在的作用域

内部函数能够访问外部函数的变量和参数。这是闭包的核心特性。

4.3 在所在作用域外被调用

内部函数可以在外部被调用，即使外部函数已经执行完毕。这样内部函数仍然可以访问其外部函数的作用域。

4.4 示例代码

我们通过代码展示这三个条件：

function outerFunction(outerVariable) {
    // 条件1: 函数嵌套
    function innerFunction(innerVariable) {
        // 条件2: 访问所在的作用域
        console.log('Outer variable: ' + outerVariable); // 访问外部变量
        console.log('Inner variable: ' + innerVariable); // 访问内部变量
    }

    // 条件3: 在所在作用域外调用
    return innerFunction; // 返回内部函数，使其可以在外部调用
}

// 创建闭包
const closure = outerFunction('I am outside!');

// 在外部调用内部函数，条件3
closure('I am inside!'); // 输出: Outer variable: I am outside! 和 Inner variable: I am inside!

4.5 解释

• 嵌套函数：innerFunction 在 outerFunction 内部定义，满足条件1。
• 访问作用域：innerFunction 可以访问 outerVariable（来自外部函数的变量），满足条件2。
• 外部调用：outerFunction 返回 innerFunction，并将其赋值给变量 closure，之后可以在外部调用 closure，满足条件3。

4.6 总结

闭包的三个条件相辅相成，构成了闭包的完整性。

5. 闭包的应用场景

闭包在JavaScript中有多种应用场景，以下是一些常见的例子：

5.1 封装私有变量

闭包可以用来创建私有变量，这些变量只能通过特定的方法访问和修改。

function createCounter() {
    let count = 0; // 私有变量

    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        }
    };
}

let counter = createCounter();
counter.increment(); // 输出: 1
counter.increment(); // 输出: 2
counter.decrement(); // 输出: 1

在这个例子中，count 是一个私有变量，外部无法直接访问它。increment 和 decrement 方法是通过闭包访问和修改 count 的。

5.2 实现模块模式

闭包可以用来实现模块模式，隐藏内部实现细节，只暴露必要的接口。

const UserModule = (function() {
    let users = []; // 私有变量

    function addUser(name) {
        users.push(name);
    }

    function getUsers() {
        return users.slice(); // 返回副本，防止外部直接修改
    }

    return {
        addUser: addUser,
        getUsers: getUsers
    };
})();

UserModule.addUser('Alice');
UserModule.addUser('Bob');
console.log(UserModule.getUsers()); // 输出: ['Alice', 'Bob']

在这个例子中，users 是一个私有变量，addUser 和 getUsers 是模块暴露的接口，外部无法直接访问和修改 users。

 

5.3 延迟执行

闭包可以用来延迟函数的执行，比如在事件处理函数中使用闭包来保存状态。

function createButtonHandler(message) {
    return function() {
        console.log(message);
    };
}

const button = document.createElement('button');
button.textContent = 'Click me';
button.addEventListener('click', createButtonHandler('Button clicked!'));
document.body.appendChild(button);

在这个例子中，createButtonHandler 函数返回一个闭包，这个闭包保留了 message 的值，并在按钮点击时输出。

 

5.4 实现函数柯里化

闭包可以用来实现函数柯里化，即把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接受余下的参数而且返回结果的新函数。

function multiply(x) {
    return function(y) {
        return x * y;
    };
}

const multiplyByTwo = multiply(2);
console.log(multiplyByTwo(5)); // 输出: 10

const multiplyByThree = multiply(3);
console.log(multiplyByThree(5)); // 输出: 15

在这个例子中，multiply 函数返回一个闭包，这个闭包保留了 x 的值，并接受另一个参数 y 进行计算。

6. 闭包的注意事项

• 内存泄漏：闭包会持有对外部变量的引用，如果不及时释放，可能会导致内存泄漏。
• 性能考虑：由于闭包需要维护外部作用域的引用，可能会对性能产生一定影响。

7. 总结

闭包是JavaScript中一个非常重要的概念，它允许函数访问其词法作用域之外的变量。通过闭包，可以实现数据封装、回调函数、函数工厂等多种功能。理解和掌握闭包对于编写高效、灵活的JavaScript代码至关重要。

拓展：

一、词法作用域

词法作用域是指在源代码的结构中定义的变量和函数的可见性和生命周期。与动态作用域不同，词法作用域的作用域是在编写代码时就确定的，而不是在运行时决定的。在JavaScript等编程语言中，词法作用域是非常重要的概念。

1. 词法作用域的基本概念

• 函数作用域：在一个函数中定义的变量和函数仅在该函数内部是可访问的。这种作用域限制意味着在函数外部无法直接访问这些内部定义的变量。

• 嵌套作用域：当一个函数嵌套在另一个函数中时，内部函数可以访问外部函数的变量。这也是闭包形成的基础。

• 变量查找：当访问一个变量时，JavaScript会从当前作用域开始查找该变量，如果当前作用域没有找到，就会向上查找即外层作用域，直到全局作用域。如果在全局作用域中仍然找不到变量，会抛出错误。

2. 示例

以下是一个简单的示例，演示了词法作用域的工作原理：

function outerFunction() {
    let outerVariable = '外部变量';

    function innerFunction() {
        console.log(outerVariable); // 访问外部变量
    }
    
    return innerFunction; // 返回内部函数
}

const closureFunction = outerFunction(); // 创建一个闭包
closureFunction(); // 输出 '外部变量'

在这个例子中：

• outerFunction 是外部函数，它定义一个局部变量 outerVariable。
• innerFunction 是嵌套在 outerFunction 中的内部函数，可以访问 outerVariable。
• 当 outerFunction 执行时，它返回 innerFunction。尽管 outerFunction 的执行上下文已经结束，innerFunction 依然可以访问 outerVariable，这就是词法作用域的效果。

3. 词法作用域与动态作用域的区别

• 词法作用域：在代码书写时就确定了作用域链。在编写代码时，嵌套的函数只能访问其自身及外部函数的变量。
• 动态作用域：在运行时根据调用栈确定作用域。动态作用域允许一个函数根据其调用位置访问不同的变量。

JavaScript使用词法作用域，这意味着你必须在定义函数时就了解这些函数将在哪个作用域中运行。

4. 实际应用

词法作用域在JavaScript中的应用非常广泛，通常出现于以下场景：

• 嵌套函数：通过嵌套函数访问外部上下文的变量。
• 创建闭包：如前述，闭包是通过词法作用域形成的，它让内部函数能够访问外部函数的变量。
• 模块化编程：通过词法作用域封装变量和方法，避免全局命名冲突，实现数据隐藏。

5. 结论

词法作用域是JavaScript和许多其他编程语言的基本特性，它影响变量的可见性和函数的行为。理解词法作用域有助于更好地组织代码，并避免常见的作用域相关问题，例如变量提升和意外的全局变量。如果你掌握了词法作用域的概念，可以更清晰地理解闭包、模块等高级编程概念。

二、立即执行函数

立即执行函数（Immediately Invoked Function Expression，IIFE）是一种JavaScript编程模式，它是一个函数声明后紧跟着一对圆括号，表示立即执行该函数。IIFE 特别有用的地方在于，它创建了一个新的作用域，避免了全局变量污染。以下是一个简单的示例：

(function() {
    console.log("Hello, World!");
})();

在这个例子中，定义了一个匿名函数并立即调用它，输出“Hello, World!”到控制台。

1. 语法

IIFE 的基本语法如下：

(function() {
    // 代码逻辑
})();

// 或者使用箭头函数
(() => {
    // 代码逻辑
})();

2. 优势

• 避免全局污染：通过在一个独立的作用域中定义变量，减少与全局作用域的冲突。
• 模块化：使代码更结构化，便于管理和维护。
• 立即执行：无需单独调用，适合需要立即执行的逻辑。

3. 应用

立即执行函数（IIFE）在JavaScript中有多种应用场景。以下是一些常见的应用示例：

3.1 创建私有变量

IIFE 可以用来创建私有变量，避免在全局作用域中污染。

var counter = (function() {
    var count = 0; // 私有变量

    return {
        increase: function() {
            count++;
            return count;
        },
        decrease: function() {
            count--;
            return count;
        }
    };
})();

console.log(counter.increase()); // 1
console.log(counter.increase()); // 2
console.log(counter.decrease()); // 1
// console.log(count); // Uncaught ReferenceError: count is not defined

3.2 模块化代码

在现代 JavaScript 编程中，IIFE 可以帮助创建模块，封装功能。

var MyModule = (function() {
    var privateVar = 'I am private';

    function privateMethod() {
        console.log(privateVar);
    }

    return {
        publicMethod: function() {
            privateMethod();
        }
    };
})();

MyModule.publicMethod(); // "I am private"
// MyModule.privateMethod(); // Uncaught TypeError: MyModule.privateMethod is not a function

3.3 解决作用域问题

在使用回调函数或事件处理时，IIFE 可以帮助锁定变量的值，避免作用域混淆。

for (var i = 0; i < 5; i++) {
    (function(index) {
        setTimeout(function() {
            console.log(index);
        }, 1000);
    })(i);
}

// 输出：0, 1, 2, 3, 4

3.4 立即执行初始化代码

IIFE 可以用作初始化代码的封装，有助于保持全局环境的干净。

(function() {
    // 初始化代码
    var appName = 'MyApp';
    console.log(appName + ' is starting...');
})();

3.5 避免与其他脚本冲突

在多个脚本文件中使用 IIFE，可以避免不同 scripts 之间的变量和函数冲突。

(function() {
    var localVar = 'This is local';
    console.log(localVar);
})();

(function() {
    var localVar = 'This is also local';
    console.log(localVar);
})();

 

三、循环与闭包

在 JavaScript 中，循环和闭包是两个重要的概念，它们常常一起使用，特别是在处理异步代码和事件时。下面是对这两个概念的基本介绍，以及它们如何结合使用的示例。

1. 循环

循环是用于重复执行一段代码的结构。在 JavaScript 中，常见的循环有 for 循环、while 循环和 do...while 循环。例如：

for (var i = 0; i < 5; i++) {
    console.log(i);
}

这段代码将输出 0 到 4 的数字。

2. 闭包

闭包是指一个函数能够“记住”并访问其外部作用域的变量，即使是在外部函数已经返回之后。这是因为 JavaScript 中的函数是对象，它们可以保存其创建时的作用域。

简单的闭包示例：

function outerFunction() {
    var outerVar = 'I am from outer scope';

    function innerFunction() {
        console.log(outerVar); // 访问外部变量
    }

    return innerFunction;
}

var myClosure = outerFunction();
myClosure(); // 输出: 'I am from outer scope'

在这个示例中，innerFunction 是一个闭包，它可以访问 outerFunction 的作用域中的 outerVar。

3. 循环与闭包的结合

闭包通常用于保持循环中的变量状态。例如，在循环中创建多个异步操作时，使用闭包可以确保每个操作都获取到正确的循环变量值。

以下是一个常见的示例，展示了如何在 for 循环中使用闭包来解决变量作用域问题：

3.1 示例：使用闭包解决循环问题

如果不使用闭包，setTimeout 的回调函数将在循环结束后才执行，导致所有回调都输出同一个值。

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 输出 5，所有的 setTimeout 都引用同一个 `i`
    }, 1000);
}

为了每次输出正确的 i 值，可以使用闭包：

for (var i = 0; i < 5; i++) {
    (function(index) {
        setTimeout(function() {
            console.log(index); // 输出正确的 index 值
        }, 1000);
    })(i);
}

3.2 使用 let 解决作用域问题

从 ES6 开始，我们可以使用 let 关键字来定义循环变量，从而避免闭包的复杂性，因为 let 会创建块作用域。

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 正确输出 0, 1, 2, 3, 4
    }, 1000);
}

4. 总结

• 循环用于重复执行代码。
• 闭包允许函数记住并访问其外部作用域的变量。
• 将这两个概念结合使用时，闭包能够解决循环中变量作用域的问题，特别是在处理异步操作时。