JavaScript函数仅调用一次却出现两次输出的问题分析

先把你的代码贴出来方便咱们一起分析：

let myName = 'John';
delayer();
myName = 'Robert';

function delayer() {
  console.log(myName);
  setTimeout(() => console.log(myName), 1500);
}

核心原因：JavaScript的执行顺序 + 箭头函数的词法作用域 #

咱们一步步拆解代码的执行流程，就能明白为什么会出现这个结果：

1. 变量初始化：let myName = 'John'执行后，变量myName被赋值为'John'。
2. 执行delayer()函数：
   • 第一行console.log(myName)是同步代码，会立刻执行，此时myName的值还是'John'，所以直接输出John。
   • 接着调用setTimeout，它会把箭头函数回调放到宏任务队列中，标记等待1500毫秒后执行，但主线程不会停下等待，而是继续往下跑同步代码。
3. 修改变量值：主线程继续执行myName = 'Robert'，把myName的值改成了'Robert'。
4. 异步回调触发：等主线程所有同步代码跑完，事件循环才会处理宏任务队列。1500毫秒到点后，箭头函数回调执行——它会从词法作用域里捕获当前myName的引用，这时候myName已经是'Robert'了，所以输出Robert。

如果想让两次输出都是John，该怎么改？ #

要是你希望setTimeout也输出John，可以把变量值通过参数传递给delayer，这样函数内部会拿到一个独立的副本（字符串是基本类型，按值传递）：

let myName = 'John';
delayer(myName);
myName = 'Robert';

function delayer(name) {
  console.log(name);
  setTimeout(() => console.log(name), 1500);
}

这样不管后续myName怎么修改，delayer里的name都是最初传入的'John'，两次输出都会是John。

内容的提问来源于stack exchange，提问作者Ahmed Afify