作用域与闭包

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

闭包

几个点理解闭包：

• 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); // 注意这一行
			});
	};
	```