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

Question

在提供的代码中，我在 VSCode 中得到的 console.log() 语句与 Chrome 控制台中不同。正如现在的代码，当我在 VSCode 中运行此代码时，输​​出为 undefined，但是当我在 Chrome 控制台中运行此代码时，输​​出为 Nimit Maru。
如果我将第 1 行中的 var 关键字更改为 let (或 const)，我会在 VSCode 中得到 undefined 和 Chrome 控制台。
最后，如果我完全删除 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();

I understand that the let keyword is typically better for local scope, and the var keyword will hoist to global scope

这是不正确的。 var 具有 function 作用域并被提升，而 const 和 let 具有 block 作用域。用 var 声明的变量的作用域将是其最近的周围函数，或者顶层(如果没有函数)。