全局对象window工作机制解析：为何变量赋值后属性值非undefined

我执行以下代码：

var A_RANDOM_VARIABLE; // I've made it capitalized because it's easier to spot // in the output
console.log(window);
A_RANDOM_VARIABLE = "I have a value";

我原本期望点击展开window对象时，该属性值显示为"undefined"，但实际显示为"I have a value"。这是怎么回事？请帮忙解释。

哈哈，这个问题其实是浏览器控制台的一个小“坑”，不少刚接触JS的开发者都会踩进去～

核心原因是：浏览器控制台对对象采用的是延迟求值策略。当你执行console.log(window)的时候，控制台并没有立刻把window对象的所有属性值都拍个快照存下来——它只是记录了这个对象的引用。只有当你点击展开这个对象的那一刻，控制台才会去读取window对象的当前状态，然后把属性展示出来。

咱们一步步拆解你的代码执行顺序：

• 你用var声明了A_RANDOM_VARIABLE，因为是全局变量，它会自动挂载到window对象上，这时候它的值是undefined。
• 你调用console.log(window)，控制台收到这个对象引用，但只是先显示一个折叠的Window标识，并没有去读取所有属性的实时值。
• 紧接着你给A_RANDOM_VARIABLE赋值为"I have a value"，这时候window.A_RANDOM_VARIABLE的值也同步更新了。
• 等你点击展开window的时候，控制台才会去遍历当前的window对象，所以看到的就是已经被更新后的属性值，而不是console.log执行那一刻的undefined。

如果想要验证console.log执行时的真实状态，可以用这两种方法：

• 直接打印单个属性：console.log(window.A_RANDOM_VARIABLE)，这时候会立刻输出undefined，因为是即时读取值。
• 创建对象的快照：console.log({...window})，这样会把window对象的属性复制到一个新对象里，展开这个新对象时，看到的就是log那一刻的状态。

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