为何使用let声明全局变量时window.variable返回undefined，var则不会？

代码示例 #

// 使用 var 声明全局变量
var val = 20;
console.log(window.val); // 输出: 20

// 使用 let 声明全局变量
let val = 20;
console.log(window.val); // 输出: undefined

核心差异说明 #

• var声明的全局变量会绑定为window的属性
  在全局作用域用var声明变量时，该变量会自动成为浏览器全局对象window的同名属性，本质上等同于执行了window.val = 20，因此可以通过window.val直接访问变量值。

• let声明的全局变量独立于window存在
  ES6引入的let（以及const）在全局作用域声明变量时，会将变量存储在独立的全局环境记录中，不会挂载到window对象上。这种设计是为了减少全局属性污染，避免意外覆盖window原有属性。这类变量依然是全局作用域的成员，可在页面任意作用域访问，但无法通过window对象获取。

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