箭头函数无自身this，继承外层词法作用域；call/apply立即执行并指定this，bind返回永久绑定新函数；类方法需显式绑定以防this丢失；事件监听器中普通函数的this默认指向currenttarget。
箭头函数里没有自己的 this，它直接继承外层作用域
这是最容易被误用的点：很多人以为箭头函数能“绑定” this，其实它根本没 this 可绑。只要函数体是箭头函数，this 就永远取自定义时的外层词法作用域，和调用方式无关。
常见错误现象：
- 在对象方法中写
() => console.log(this)，结果打印出全局对象（浏览器是window，Node 是global）或undefined（严格模式） - 给事件监听器传箭头函数，期望
this指向触发元素，实际指向外层函数的this
正确做法：
- 需要动态绑定
this的场景（如事件回调、定时器、异步回调），改用普通函数 - 若必须用箭头函数，确保外层作用域的
this已是你想要的对象（比如在类构造器里提前用bind或赋值为变量）
call / apply / bind 的区别和适用时机
三者都能显式指定函数执行时的 this，但行为不同：
立即学习“Java免费学习笔记（深入）”；
-
call立即执行，参数逐个传入：fn.call(obj, a, b) -
apply立即执行，参数以数组形式传入：fn.apply(obj, [a, b]) -
bind不执行，返回一个新函数，this被永久绑定：const boundFn = fn.bind(obj)
性能与兼容性注意：
-
bind返回的函数无法再用call或apply改变this（已被硬绑定） - ES6+ 中，
bind生成的函数的length属性是 0（不计入绑定参数），可能影响某些依赖形参个数的库 - 在频繁调用的回调中（如
requestAnimationFrame），避免反复bind，应提前绑定或用变量缓存
类方法中 this 丢失的典型场景和修复方式
React 类组件、自定义类中，把方法直接传给子组件或事件处理器时，this 极易丢失 —— 因为只是传递了函数引用，没绑定上下文。
示例问题代码：
class Button {
constructor() {
this.label = 'Click me';
}
handleClick() {
console.log(this.label); // undefined
}
render() {
return <button onclick="this.handleClick">{this.label}</button>;
}
}
修复方案（按推荐顺序）：
- 构造器中绑定：
this.handleClick = this.handleClick.bind(this) - 使用类字段语法（需 Babel/TS）：
handleClick = () => { ... }（本质是箭头函数 + 外层this继承） - 调用时临时绑定：
<button onclick="this.handleClick.bind(this)"></button>（不推荐，每次渲染都新建函数）
事件监听器里的 this 默认指向谁？怎么控制？
原生 DOM 事件中，普通函数作为监听器时，this 默认指向触发该事件的元素（event.currentTarget），不是 event.target，也不是定义函数时的作用域。
但这个默认行为只在以下情况成立：
- 用
addEventListener添加监听器（且没用箭头函数） - 用 HTML 内联
onclick时，this指向当前元素（但内联写法已不推荐）
容易踩的坑：
- 用
addEventListener传箭头函数：el.addEventListener('click', () => console.log(this))→this是外层作用域，不是el - 想在监听器里访问组件实例，又不想污染
this，推荐从闭包捕获：const self = this; el.addEventListener('click', function() { console.log(self); }) - 用
event.currentTarget替代this更可靠，尤其在事件代理中
this 指向什么」—— 是调用者？定义者？还是某个固定对象？一旦目标模糊，所有绑定手段都会变成障眼法。 
