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

Question

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

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())

当它们都具有相同的全局范围时，我无法理解为什么会有两个不同的结果。

Answer 1

作为您的对象方法，您使用了箭头函数，其上下文（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