我们如何解释 let 和 var 在浏览器全局范围内的区别?

How can we explain the differences between let and var in global scope of browser?

当我使用 var 关键字时,结果是 10

var x = 10;
let foo = {
  x: 90,
  getX: () => {
    return this.x
  }
}

console.log(foo.getX())

但是 undefined 是我使用 let 关键字时的结果:

let x = 10;
let foo = {
  x: 90,
  getX: () => {
    return this.x
  }
}

console.log(foo.getX())

我不明白为什么会有两个不同的结果,当它们都具有相同的全局范围时。

作为您的对象方法,您使用了箭头函数,其上下文(this 值)绑定到您声明它们的函数。

也就是说,您的 getX 函数的 this 值将是全局对象 (window)。

然后您尝试访问该对象的 x 属性,即 10(因为全局范围 var 在全局对象上创建属性) var 的情况。

但是,let 永远不会在全局对象上创建 属性,因此在第二个示例中,您会得到 undefined.

试一试:

const object = {
  method: () => this
}

console.log(object.method() === window) //true

var foo = 1
let bar = 2

console.log(foo, window.foo) // 1 1
console.log(bar, window.bar) // 2 undefined