JavaScript中window对象属性赋值前的取值逻辑相关疑问

1. 你对执行上下文的阶段顺序理解有误 #

首先纠正核心认知错误：执行上下文的执行顺序是先创建阶段，后执行阶段，你刚好搞反了两个阶段的顺序：

• 创建阶段：JS引擎会先扫描整个作用域的声明，var声明的变量会提前挂载到全局对象上，初始值被赋值为undefined，这个过程就是常说的变量提升
• 执行阶段：JS引擎才会逐行执行代码，遇到赋值语句时才会给变量赋实际值

你两段代码里，console.log执行时，var myVar = 1的赋值操作还没执行，所以此时window.myVar的真实值确实是undefined。

2. 打印整个window对象显示值为1是浏览器控制台的特性导致的 #

浏览器的开发者工具控制台，打印引用类型（比如对象、数组）时，默认输出的是对象的引用快照，不是你调用console.log那一刻的对象实时值：

• 当你调用console.log(window)时，控制台只会先折叠展示对象的概要，等你手动点击展开对象查看属性时，JS代码已经执行完毕，myVar已经被赋值为1，所以你看到的属性值是执行完全部代码后的最终值
• 而你直接打印window.myVar时，输出的是基础类型值，会直接拿到调用console.log那一刻的实时值，所以返回的是符合预期的undefined

3. 验证方法 #

你可以用以下两种方式验证打印时刻的真实值：

• 在console.log(window)行加断点，代码停在这一行时查看window.myVar的取值，此时确实是undefined
• 打印时把对象转为基础类型输出，比如console.log(JSON.stringify({myVar: window.myVar}))，此时得到的myVar值就是undefined

举个更直观的复现代码，你可以直接运行验证：

const testObj = { num: 1 }
// 直接打印属性，得到打印时刻的实时值1
console.log(testObj.num) 
// 打印对象，展开后看到的是后续修改后的值2
console.log(testObj)
testObj.num = 2

内容的提问来源于stack exchange，提问作者James Roberts