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

【问题标题】：How can we explain the differences between let and var in global scope of browser? [duplicate]我们如何解释 let 和 var 在浏览器全局范围内的区别？ [复制]
【发布时间】：2020-09-02 07:55:37
【问题描述】：

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

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

【问题讨论】：

标签： javascript var arrow-functions let global-scope

【解决方案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

【讨论】：