使用 var vs let 记录全局变量会产生不同的结果

Question

在提供的代码中，我在 VSCode 中得到的 console.log() 语句与在 Chrome 控制台中不同。就像现在的代码一样，当我在 VSCode 中运行此代码时，输​​出为 undefined，但是当我在 Chrome 控制台中运行此代码时，输​​出为 Nimit Maru。
如果我将第 1 行中的 var 关键字更改为 let（或 const），我会在 VSCode 和 Chrome 控制台中得到 undefined。
最后，如果我完全删除 var/let 关键字，并使用 fullName = 'Nimit Maru'; 运行第 1 行，我在 VSCode 和 Chrome 控制台中的输出都是 Nimit Maru。

我知道 let 关键字通常更适合本地范围，而 var 关键字将提升到全局范围，但我认为这不能解释为什么我从一个控制台得到不同的结果下一个。看到这个变量是在全局范围内定义的，我认为这不会有什么不同。

var fullName = 'Nimit Maru';

let myObj = {
  fullName: 'David Yang',
  property: {
    fullName: 'Omri Bernstein',
    getFullName: function() {
      console.log(this.fullName);
    },
  },
};

let whosName = myObj.property.getFullName;

whosName();

感谢您提供的任何见解。

Answer 1

var 顶级变量自动分配给window 对象的属性。 let 和 const 变量不会发生此行为：

var varName = 'foo';
let letName = 'bar';
const constName = 'baz';
console.log(
  window.varName,
  window.letName,
  window.constName
);

当你调用whosName(); 时，你调用它时没有调用上下文，所以this 默认为window。因此，函数内部的this.fullName 将引用window.fullName，只有在您使用var fullName 时才会定义它。 （如果你使用了let fullName或const fullName，它就不会被分配给window，导致undefined。）

如果您想引用内部对象 (Omri Bernstein) 的 fullName属性，请使用 bind 或另一个调用 myObj.property.getFullName 的函数并带有适当的调用上下文：

let myObj = {
  fullName: 'David Yang',
  property: {
    fullName: 'Omri Bernstein',
    getFullName: function() {
      console.log(this.fullName);
    },
  },
};

let whosName1 = () => myObj.property.getFullName();
let whosName2 = myObj.property.getFullName.bind(myObj.property);

whosName1();
whosName2();

我知道 let 关键字通常更适合本地范围，而 var 关键字将提升到全局范围

这是不正确的。 var 具有 function 范围并被提升，而 const 和 let 具有 block 范围。使用var 声明的变量的作用域是它最近的周围函数，如果没有函数，则为顶层。