为何变量that未指向test1的this？代码执行结果不符预期

首先先看你提供的代码：

function test1() {
  this.name = 'test1';
  var that = this;
  function test2() {
    this.name = 'test2';
    console.log(that.name);
  }
  test2();
}
test1();

你的误区在于对非严格模式下直接调用函数时this的指向理解有误，咱们一步步拆解：

• 当你直接调用test1()时，非严格模式下函数的this会指向全局对象（浏览器环境是window，Node.js环境是globalThis）。所以this.name = 'test1'其实是给全局对象添加了一个name属性，值为'test1'。
• var that = this这行代码，让that变量保存了对全局对象的引用，而不是test1函数本身的引用。
• 接着你在test1内部定义了test2，然后直接调用test2()——同样的规则，直接调用函数时this还是指向全局对象。所以this.name = 'test2'是把全局对象上的name属性给覆盖成了'test2'。
• 最后console.log(that.name)，that指向的是全局对象，此时全局对象的name已经被改成'test2'了，所以控制台就输出了这个值。

如果想要得到你预期的test1结果，可以试试把test1作为构造函数调用（用new关键字）：

function test1() {
  this.name = 'test1';
  var that = this;
  function test2() {
    this.name = 'test2'; // 这里的this还是全局对象
    console.log(that.name); // that指向test1的实例，name是'test1'
  }
  test2();
}
new test1(); // 控制台输出'test1'

这时候test1里的this指向的是new关键字创建的新实例对象，that保存的是这个实例的引用，test2里修改的是全局对象的name，不会影响实例的name，所以输出test1。

内容的提问来源于stack exchange，提问作者Krimson