箭头函数this用法及使用技巧解析

箭头函数的this是词法绑定、定义即固化，不随调用方式改变，使其成为捕获外层上下文（如React组件实例、定时器/事件回调中的this）的理想选择，避免了手动bind或self缓存的繁琐；但正因它没有自己的this、arguments，也不能被new调用，因此在需要动态this、访问函数参数对象或作为构造函数的场景中，必须回归普通函数——掌握二者本质差异与适用边界，能帮你写出更可靠、可维护且性能可控的JavaScript代码。

箭头函数的 this 是词法绑定的，不是运行时绑定

普通函数的 this 取决于调用方式（谁调用、怎么调用），而箭头函数没有自己的 this，它直接从外层作用域继承 this 值——这个值在函数定义时就确定了，之后永远不会变。

这意味着：
• 在对象方法中写箭头函数，this 不会指向该对象，而是指向定义时的外层 this（通常是全局或模块顶层）
• 在事件回调、setTimeout 或 Promise.then 中用箭头函数，能自然捕获外层 this，避免手动 .bind(this) 或缓存 const self = this

常见错误现象：
• obj.method() 内部用箭头函数访问 this.prop，结果是 undefined
• 类中写 handleClick = () => { console.log(this.state) } 没问题，但写成 handleClick() { console.log(this.state) } 后又在 JSX 里写 onClick={this.handleClick}，就可能因绑定丢失而报错

什么时候必须用普通函数，不能用箭头函数

以下场景必须用 function 关键字定义的函数（或方法简写）：

• 对象方法需要访问自身属性，例如 obj.getName() { return this.name }
• 类的方法需要被正确绑定到实例（尤其没用类字段语法时），例如构造器里没手动 this.fn = this.fn.bind(this)，又没用箭头函数字段写法
• 需要使用 arguments 对象（箭头函数没有 arguments）
• 需要通过 call/apply/bind 动态指定 this

示例对比：

const obj = {
  name: 'Alice',
  regular() { return this.name },           // ✅ 返回 'Alice'
  arrow: () => this.name                    // ❌ 返回 undefined（this 是全局或 module）
};

React 类组件中箭头函数字段的 this 行为

像 handleSubmit = (e) => { this.setState(...) } 这种写法，本质是把函数赋值给实例属性，且因箭头函数特性，this 永远指向组件实例——这绕过了传统方法绑定问题。

但要注意：
• 它不是“自动绑定”，而是靠词法作用域捕获了定义时的 this（即 class 构造阶段的实例）
• 每次渲染都重新创建函数（可能影响 React.memo 或 useCallback 的依赖判断）
• 如果函数体很大或频繁触发，建议改用 useCallback + 普通函数，配合依赖数组控制重创建

性能提示：大量使用类字段箭头函数可能导致内存占用略高，尤其在列表项组件中；函数体简单、不涉及闭包大对象时，影响可忽略。

如何快速判断该用哪种函数

问自己三个问题：
• 我是否需要 this 指向调用者？→ 用普通函数
• 我是否希望 this 和外层保持一致（比如类顶层、事件处理器外层）？→ 用箭头函数
• 我是否需要 arguments 或动态绑定？→ 用普通函数

容易被忽略的一点：箭头函数不能用作构造函数（调用会报 TypeError: xxx is not a constructor），所以从不用于 new 场景。

今天关于《箭头函数this用法及使用技巧解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！