简单JavaScript代码执行顺序疑问：为何首次console.log输出Barry？

你遇到的问题核心是忽略了result()调用的执行时机，完整执行流程拆解如下：

原始代码 #

function f1() {
    n = 999;
    change = function() {
        n = "Barry";
    };
    return change;
}

var result = f1();
result(); 
console.log(n)
change();
console.log(n)

逐行执行逻辑 #

• 全局初始化阶段：提前声明函数f1和全局变量result（初始值为undefined）
• 执行var result = f1()：进入f1函数上下文
  • n未使用变量声明关键字，直接挂载为全局变量，赋值为999
  • change同样未使用变量声明关键字，挂载为全局变量，赋值为「修改n为"Barry"」的匿名函数
  • 将该匿名函数引用返回，赋值给全局变量result，此时result和全局change指向完全相同的函数
• 执行result()：调用这个匿名函数，将全局变量n的值修改为"Barry"
• 执行第一次console.log(n)：此时n已经被修改为"Barry"，所以输出Barry
• 执行change()：调用和result同一个函数，再次把n赋值为"Barry"，值无变化
• 执行第二次console.log(n)：输出结果仍然为Barry

误区说明 #

你原有认知里的「调用f1赋值给result时change函数尚未执行」是对的，但赋值完成后立刻执行了result()，这一步已经触发了修改n的逻辑，所以第一次打印前n的值已经被更新。

内容的提问来源于stack exchange，提问作者PEIRAN LIU