作用域与闭包

相信读者已经看过很多相关文章，我们这里主要讲一下实战使用。

闭包

几个点理解闭包：

• JS 中是存在变量作用域的
• 变量只在作用域内生效
• 闭包允许作用域之外的程序读取变量

闭包以一种较为可控的形式，将变量共享。

你真的理解了吗？

思考这样一道题（via）：

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

console.log(new Date(), i);

输出结果：

Wed Dec 14 2022 16:00:36 GMT+0800 (中国标准时间) 5
Wed Dec 14 2022 16:00:37 GMT+0800 (中国标准时间) 5
Wed Dec 14 2022 16:00:37 GMT+0800 (中国标准时间) 5
Wed Dec 14 2022 16:00:37 GMT+0800 (中国标准时间) 5
Wed Dec 14 2022 16:00:37 GMT+0800 (中国标准时间) 5

结合事件循环的知识，我们可以知道，setTimeout 是异步的，所以会在循环结束后执行五次，而此时 i 已经变成了 5。同时，由于宏任务先进后出的结构，会先执行最后一行的输出，接着循环中的四次输出会一起执行。

第三行中的 i 并非“复制”了一份，而是引用了外部的 i ——这就是闭包的作用。

实际运用

看一个真实的业务代码

    const [history, setHistory] = useState([]);
    const [input, setInput] = useInput("");

    const handleSend = () => {

        setHistory((prevHistory) => [
            ...prevHistory,
            {
                type: "human",
                text: input,
                date: new Date(),
            },
        ]);

        axios
            .post("/api/apps/openai", /**... */)
            .then((res) => {
                setHistory((prevHistory) => [
                    ...prevHistory,
                    {
                        type: "bot",
                        text: res.data.choices[0].text,
                        date: new Date(),
                    },
                ]);
                setHistory(history); // 注意这一行
            });
    };
    ```