js中that this

在JavaScript中，“this”是一个关键字，它代表函数运行时的上下文对象。然而，在某些情况下，特别是在回调函数或者事件处理器中，直接使用“this”可能会导致一些意想不到的结果，因为“this”的指向可能会改变。

为了解决这个问题，开发者经常使用“that”作为一个变量来保存“this”的引用。这样，即使在回调函数或者事件处理器中，“that”仍然指向原始的上下文对象。

例如：

var obj = {
  name: 'John',
  describe: function () {
    var that = this; // 使用that保存this的引用
    setTimeout(function () {
      console.log(that.name); // 使用that来访问obj的name属性
    }, 100);
  }
};

obj.describe(); // 输出 "John"

在这个例子中，describe 方法中的 setTimeout 回调函数改变了 this 的指向。但是，由于我们在 describe 方法中使用 that 变量保存了 this 的引用，所以在 setTimeout 回调函数中，我们仍然可以通过 that 来访问 obj 对象的 name 属性。

然而，现代JavaScript提供了更优雅的方式来处理这个问题，那就是使用箭头函数。箭头函数不会创建自己的 this 上下文，而是从父作用域继承 this。因此，我们可以使用箭头函数来避免使用 that 变量。

例如：

var obj = {
  name: 'John',
  describe: function () {
    setTimeout(() => {
      console.log(this.name); // 直接使用this来访问obj的name属性
    }, 100);
  }
};

obj.describe(); // 输出 "John"

在这个例子中，我们使用了箭头函数作为 setTimeout 的回调函数。由于箭头函数从父作用域继承了 this，所以我们可以直接在回调函数中使用 this 来访问 obj 对象的 name 属性，而无需使用 that 变量。