深入理解JavaScript中的作用域与闭包：You Don't Know JS核心解读-优快云博客

深入理解JavaScript中的作用域与闭包：You Don't Know JS核心解读

You-Dont-Know-JS 📗📒 (PT-Br translation) JS Book Series. 项目地址: https://gitcode.com/gh_mirrors/you/You-Dont-Know-JS

前言：闭包的神秘面纱

闭包(closure)是JavaScript中最强大却又最容易被误解的概念之一。许多开发者即使有多年的JavaScript经验，对闭包的理解仍然停留在表面。本文将带你深入探索闭包的本质，揭示它如何在日常代码中无处不在。

什么是闭包？

闭包的核心定义：当一个函数能够记住并访问其词法作用域，即使这个函数在其词法作用域之外执行时，就产生了闭包。

从简单例子开始

function foo() {
    var a = 2;
    
    function bar() {
        console.log(a); // 2
    }
    
    bar();
}

foo();

这段代码展示了词法作用域的查找规则，但严格来说，这还不是闭包的完整体现。闭包真正的威力在于函数在其声明的作用域之外执行时，仍然能够访问原始作用域中的变量。

闭包的经典示例

function foo() {
    var a = 2;
    
    function bar() {
        console.log(a);
    }
    
    return bar;
}

var baz = foo();
baz(); // 2 — 这就是闭包！

在这个例子中：

bar函数被定义在foo内部，可以访问foo的作用域
我们将bar函数本身作为返回值
即使foo执行完毕，baz（即bar的引用）仍然可以访问foo内部的变量a

闭包的实际应用

闭包不是实验室里的概念，而是真实存在于我们的日常代码中：

1. 定时器

function wait(message) {
    setTimeout(function timer() {
        console.log(message);
    }, 1000);
}

wait("Hello, closure!");

timer函数在wait执行完毕1000毫秒后才执行，但仍然能够访问message变量。

2. 事件处理

function setupBot(name, selector) {
    $(selector).click(function activator() {
        console.log("Activating: " + name);
    });
}

setupBot("Closure Bot 1", "#bot_1");
setupBot("Closure Bot 2", "#bot_2");

每个点击处理函数都记住了各自的name参数，这就是闭包在发挥作用。

循环与闭包的经典问题

for (var i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i);
    }, i * 1000);
}

这段代码会输出什么？不是预期的1,2,3,4,5，而是6被打印了5次！为什么？

问题分析

所有定时器回调共享同一个全局作用域中的i变量。当循环结束时，i的值已经是6，所以所有回调都打印6。

解决方案

我们需要为每次迭代创建一个新的作用域：

方案1：使用IIFE

for (var i = 1; i <= 5; i++) {
    (function(j) {
        setTimeout(function timer() {
            console.log(j);
        }, j * 1000);
    })(i);
}

方案2：使用let块级作用域

for (let i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i);
    }, i * 1000);
}

let在循环中的特殊行为使其成为解决这类问题的完美方案。

模块模式：闭包的高级应用

模块是闭包最强大的应用之一：

function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    
    function doSomething() {
        console.log(something);
    }
    
    function doAnother() {
        console.log(another.join(" ! "));
    }
    
    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
}

var foo = CoolModule();
foo.doSomething(); // "cool"
foo.doAnother(); // "1 ! 2 ! 3"

模块模式的关键要素：