怎么巧用箭头函数的词法 this 消除早期项目中随处可见的 that 临时变量-js教程-PHP中文网

箭头函数的this继承外层作用域，可替代var that=this，常用于异步回调、事件监听、数组方法等场景；但不可用于对象方法、需动态绑定this或构造函数等场合。

怎么巧用箭头函数的词法 this 消除早期项目中随处可见的 that 临时变量

箭头函数的词法 this 本质是“继承外层作用域的 this”，不绑定自己的上下文。这正好能替代早期项目里靠 var that = this（或 _this、self）来保存外围 this 的写法——不是“技巧”，而是更自然、更安全的语义表达。

哪里最常出现 `that`？

典型场景集中在回调函数中，尤其是异步操作、事件监听、定时器、Promise 链里：

AJAX 请求成功/失败回调（如 jQuery .done()、原生 fetch().then()）
DOM 事件处理（element.addEventListener('click', function() { ... })）
数组方法中的回调（arr.map(function(item) { return this.xxx; })）
定时器（setTimeout(function() { this.doSomething(); }, 100)）

用箭头函数直接替换传统 function

只要回调函数里需要访问外围实例的属性或方法，且该外围作用域是 class 实例方法或普通对象方法，就可把 function 改成箭头函数：

// ❌ 旧写法：手动保存 this

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

class Timer {
  constructor() {
    this.count = 0;
  }
  start() {
    var that = this; // ← 冗余且易错
    setInterval(function() {
      that.count++; // ← 依赖 that
      console.log(that.count);
    }, 1000);
  }
}

// ✅ 新写法：箭头函数自动捕获 this

class Timer {
  constructor() {
    this.count = 0;
  }
  start() {
    setInterval(() => { // ← 箭头函数，this 指向 Timer 实例
      this.count++;
      console.log(this.count);
    }, 1000);
  }
}

注意边界：不能在所有地方无脑替换

箭头函数没有自己的 this，所以它不适合需要动态 this 绑定的场景：

作为对象方法定义（obj = { fn: () => this.xxx } → this 指向外层，不是 obj）
需要被 call/apply/bind 显式改变 this 的函数
构造函数（箭头函数不能用 new 调用）
Vue 或 React 类组件中，生命周期钩子或事件方法若需被框架调用并绑定组件实例，仍需确保定义方式兼容（现代 Vue/React 推荐用 setup 或 hooks，天然规避此问题）