17370845950

箭头函数没有自己的this，其this由词法作用域决定，继承自外层作用域；适用于数组回调、异步回调等需固定this的场景，但不可用作构造函数、无arguments对象、不兼容IE。

箭头函数没有自己的 this，因为它不绑定 this

箭头函数的 this 是词法作用域决定的——它直接从外层函数（或全局）继承 this 值，不创建新的执行上下文。这不是“丢失”，而是根本没定义自己的 this 绑定。所以当你在对象方法里写 () => this.xxx，this 指向的是定义时所在作用域的 this，不是调用时的对象。

常见错误现象：对象方法里用箭头函数导致 this 指向意外

比如：

const obj = {
  name: 'Alice',
  regularMethod() {
    console.log(this.name); // 'Alice'
  },
  arrowMethod: () => {
    console.log(this.name); // undefined（严格模式下），因为 this 指向全局或 undefined
  }
};

• 对象字面量中直接用箭头函数定义方法，this 不会指向该对象
• 事件监听器里用 obj.handleClick = () => {...}，看似方便，但一旦把该函数传给别的上下文（如 setTimeout(obj.handleClick, 100)），this 仍保持原样——但这可能掩盖了本应动态绑定的需求
• Vue / React 类组件的生命周期钩子或事件回调中误用箭头函数，可能导致无法访问 this.state 或 this.$data

真正适合箭头函数的场景：明确需要词法 this + 简洁表达

这些地方不需要动态 this，反而要“锁住”外层上下文：

• 数组方法回调：[1,2,3].map(x => this.scale * x)，避免手动 bind(this) 或写 function(x) { return this.scale * x; }
• 异步回调中保持外层 this：setTimeout(() => this.handleTimeout(), 1000)，不用再存 const self = this
• React 函数组件内联事件处理器（注意：是函数组件内部，不是 class 组件的方法）： this.setState({x: 1})}>... —— 这里 this 是外层函数作用域的（不过现代 React 更推荐 useState + 普通函数）
• 立即执行函数表达式（IIFE）或闭包构造器中封装私有状态

性能与兼容性提醒：别为了语法糖牺牲可读性或语义

箭头函数本身没有运行时性能优势，V8 等引擎对普通函数和箭头函数的优化程度基本一致。但要注意：

• 不能用作构造函数：new (() => {}) 报 TypeError: xxx is not a constructor
• 没有 arguments 对象，要用剩余参数 (...args) => {...}
• 没有 prototype 属性，typeof 仍是 "function"，但不可被 instanceof 检测
• IE 完全不支持，如果项目需兼容 IE，所有箭头函数都得转译（Babel 默认处理）

最常被忽略的一点：当一个函数既可能被直接调用、也可能被作为方法调用时，强行用箭头函数会破坏调用约定——这时候宁可用 function + 显式 .bind() 或重构为类方法，也别依赖词法 this 去“猜”行为。