为什么全局允许声明被未编组的变量覆盖？

Question

当我们在没有指定let或var的情况下创建变量时，它会被添加到浏览器中的window对象中。例如

function change(){
    val = 20;
}
change();
console.log(window.val); //20
console.log(val);  //20

在这里，我得到两个控制台日志打印值20。但我使用let做同样的事情它没有被添加到窗口对象。我看到this answer解释了为什么会这样。

let val = 20;
console.log(window.val); //undefined
console.log(val); //20

现在，在下面的代码中，有人可以解释一下，当我在函数内部分配一个无范围的变量时，为什么它没有被添加到window范围？而是如何改变用let声明的变量的值

let value = 10;
function change(){
    value = 20;
}
change();
console.log(window.value); //undefined 
console.log(value); //20  why this is 20?

Answer 1

MDN说这关于var：

使用var声明的变量的范围是它的当前执行上下文，它可以是封闭函数，也可以是在任何函数外部声明的变量global。如果重新声明JavaScript变量，它将不会丢失其值。

MDN说这关于let：

let声明的变量的范围在它们被定义的块中，以及任何包含的子块中。通过这种方式，let非常像var。主要区别在于var变量的范围是整个封闭函数：

它们最终都在一个范围内，然后传播到子范围，但它们最终会进入范围，以及它们如何确定范围是不同的。

请注意，整个<script>元素确实具有隐式块，并且此隐式块继承window作为祖先范围。由var声明的变量最终作用于window，而let声明的变量作用于此隐式块。

Answer 2

在脚本的顶层使用let声明变量，可以在整个脚本内部甚至在外部访问它。在函数内部，您没有为未作用域的变量赋值。

即使您要编写如下函数，它也不会分配给窗口对象，因为它将是函数作用域。

function change(){
var value = 20;
}