箭头函数能彻底解决回调中上下文丢失，关键在于它不绑定自己的 this，而是直接继承定义时外层作用域的 this——在 Vue 或 React 组件里，这个外层作用域通常就是组件实例本身。
箭头函数能彻底解决回调中上下文丢失，关键在于它不绑定自己的 this，而是直接继承定义时外层作用域的 this——在 Vue 或 React 组件里，这个外层作用域通常就是组件实例本身。只要写对位置、用对方式，就不用手动 bind、也不用存 const self = this。
Vue 中：在 methods 或生命周期钩子里直接用箭头函数
Vue 实例方法（如 mounted、created、自定义 methods）内部的箭头函数，会自然捕获组件实例的 this：
- 异步请求中：
axios.get().then(res => this.setData(res))，this指向当前 Vue 实例，可直接访问data、methods、computed - 定时器里：
setTimeout(() => { this.loading = false }, 500)，无需担心this变成window或undefined - 事件监听：
document.addEventListener('scroll', () => this.handleScroll())，this仍是组件，不是document
React 类组件中：用类字段语法 + 箭头函数固定 this
把事件处理器或异步逻辑写成类字段（而非普通方法），就能让 this 始终指向组件实例：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
-
handleClick = () => { console.log(this.state.count); }—— 定义在类体顶层，自动绑定 -
fetchData = () => { fetch('/api').then(data => this.setState({ data })) }—— Promise 链里每一层箭头函数都继承外层fetchData的 this - JSX 中直接写：
<button onClick={this.handleClick}>，不用bind，也不用内联() => this.handleClick()
列表渲染和循环传参：靠闭包捕获当前项，避免 this 干扰
在 map 或 v-for 中生成回调时，重点不是 this，而是变量捕获。箭头函数天然形成闭包，安全保留外层变量：
立即学习“Java免费学习笔记（深入）”；
- Vue：
v-for="item in list" :key="item.id"><button @click="() => handleItemClick(item.id)">{{ item.name }}</button> - React：
{list.map(item => <button onClick={() => this.handleItemClick(item.id)} key={item.id}>{item.name}</button>)} - ⚠️ 别写成
onClick={this.handleItemClick(item.id)}——这会立即执行，不是点击时调用
注意边界：哪些地方不能用箭头函数
箭头函数的 this 是静态继承的，所以不适合需要动态 this 的场景：
- 对象字面量里的方法：
const obj = { fn: () => console.log(this) }，这里的this不指向obj，而是外层作用域 - DOM 事件监听器中想让
this指向目标元素（比如event.currentTarget）——箭头函数做不到，得用普通函数 +event参数 - 构造函数或需要
arguments、super的场合，箭头函数不支持
