javascript - 为什么要在 javascript 闭包中打印这个值？

Question

我知道一些关闭机制，但是这段代码让我感到困惑。
我能理解为什么 num value in message：1因 unmount 被打印过时的关闭
但为什么num value: 5打印而不是 num value: 1 ?不是num在 unmount 中也是陈旧的关闭？

const test = () => {
  let num = 0;

  const effect = () => {
    num += 1;
    const message = `num value in message：${num}`;

    return function unmount() {
      console.log(message);
      console.log("num value:", num);
    };
  };

  return effect;
};
const add = test();
const unmount = add();
add();
add();
add();
add();
unmount(); // num value in message：1 ; num value: 5

codesandbox

Answer 1

Isn't num also stale in unmount closure?

不，因为只有一个 num曾经被创建，就在这里:

let num = 0;

当测试运行时，测试只运行一次。
对 num 的任何引用将引用那个变量。效果运行时， num += 1;将增加那个变量。
但是如果你在 effect 内部创建了一个新变量而不是增加外部变量，它就会过时。

const test = () => {
  let num = 0;

  const effect = () => {
    const innerNum = num + 1;
    const message = `num value in message：${innerNum}`;

    return function unmount() {
      console.log(message);
      console.log("num value:", innerNum);
    };
  };

  return effect;
};
const add = test();
const unmount = add();
add();
add();
add();
add();
unmount(); // num value in message：1 ; num value: 5

该消息是“陈旧的”，因为创建和使用的字符串是在 num 之前创建的。已完成所有添加调用的递增。如果您从上次添加卸载，它就不会过时。

const test = () => {
  let num = 0;

  const effect = () => {
    num += 1;
    const message = `num value in message：${num}`;

    return function unmount() {
      console.log(message);
      console.log("num value:", num);
    };
  };

  return effect;
};
const add = test();
add();
add();
add();
add();
const unmount = add();
unmount();