为何变量声明前window对象已包含带值的该变量？

兄弟，你这大概率是踩了浏览器控制台的一个“坑”！我来给你掰扯清楚：

首先先明确正常的变量提升逻辑，如果你的代码是这样的：

console.log(window.a); // 这里输出 undefined
var a = 10;
console.log(window.a); // 这里输出 10

这才符合预期——var声明的变量会提升到全局作用域顶部，所以第一个log时window.a已经存在，但值是undefined，赋值之后才变成10。

那为啥你看到第一个window对象展开后a是10？问题出在浏览器控制台对引用类型的显示机制上：

• 当你执行console.log(window)的时候，控制台并不会立刻把window的所有属性都快照下来显示，它只是存了一个对window对象的引用。
• 等你点击展开这个对象的时候，控制台才会去读取window当前的属性值——这时候你已经执行了var a=10的赋值操作，所以看到的a就是10了！

如果你不信，可以换个方式验证：

• 不要展开对象，直接打印window.a的具体值，第一个输出肯定是undefined；
• 或者用console.log(JSON.parse(JSON.stringify(window)))生成一个对象快照，这时候第一个log里的a也会是undefined。

说白了，不是代码执行顺序出问题了，是控制台的“延迟展开”特性给你造成了错觉！

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