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

Question

当我使用 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())

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

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

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

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

javascript

var

let

global-scope

arrow-functions