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

Question

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

如果要引用内部对象（fullName）的Omri Bernstein 属性，请使用bind或另一个调用{{1}的函数}，并带有适当的调用上下文：

myObj.property.getFullName

  

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

这是不正确的。 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();具有功能范围并被吊起，而var和const具有 block 范围。用let声明的变量的作用域是其最近的周围函数，如果没有函数，则作用域是顶层。