Chrome 控制台：“let”和“var”之间的区别？

Question

我附上了一个动画 gif 来说明这种奇怪的行为。从本质上讲，我的问题是 Chrome 控制台在同一范围内使用时是否会区别对待 var 和 let？您会注意到，在声明/分配变量后，如果您尝试在控制台中输入该变量的名称，Chrome 会自动为您完成它，并显示一个包含您输入内容的下拉列表。在使用lets 时，情况并非如此。这是一个错误、功能，还是我在 JavaScript 中缺少关于 var 和 let 的东西？

注意：我很清楚let 在直接范围内生死攸关。

Answer 1

当您在控制台中使用var 时，它会在全局范围内执行并将变量添加到window 对象中。

当您在控制台中使用let 时，它会在全局范围内执行，不会将变量添加到window 对象中。

当您开始键入时，自动完成功能会检查父对象的属性以及其他语言结构，例如 function、for 和 while。

当控制台中没有内容时，父对象为window，它不会有您要查找的属性，因为let 没有将属性添加到window。

一旦你有一个新对象来完成自动完成，行为就会恢复到你所期望的状态。

> let foo = {bar: 'baz'};
> foo.b //autocompletes bar

---

现在，说了这么多，没有理由让自动完成 表现得那样。在许多方面，通过let 在全局范围内定义的变量缺乏自动完成功能可以被认为是一个值得“修复”的“错误”。在我看来，这是适度令人惊讶的行为。

Answer 2

var 在全局范围内定义变量，而let 仅在本地范围内定义。最有可能的是，自动完成功能仅查看目标的全局范围。