箭头函数的this在定义时继承外层词法作用域且不可修改，因此call、apply、bind均无法改变其this指向；它们仅对普通函数生效，对箭头函数调用时this仍为原始外层上下文。
箭头函数与 call、apply、bind 配合使用时，这三者都无法改变箭头函数内部的 this 指向。因为箭头函数没有自己的 this，它的 this 是在定义时就确定并继承自外层作用域的，后续任何显式绑定操作都无效。
为什么 call/apply 对箭头函数无效？
它们的设计目标是“在调用时临时指定 this”，但箭头函数体内根本不存在可被覆盖的 this 绑定机制。即使强行传入对象作为第一个参数，也不会影响其行为：
-
const fn = () => console.log(this)——this取决于定义时的外层上下文（比如全局或某个函数） -
fn.call({x: 1})或fn.apply({x: 1}, [])—— 输出仍是原始外层的this，不是{x: 1} - 在浏览器中，若定义在全局作用域，
this就是window；在模块顶层，则是undefined（严格模式）
bind 在箭头函数上做了什么？
bind 会返回一个新函数，但它只对普通函数生效。对箭头函数调用 bind：
- 仍会返回一个新函数（类型仍是箭头函数）
- 该新函数的
this依然沿用原始定义时的外层this，不会变成bind的第一个参数 - 参数预绑定（即部分参数固化）仍然有效，只是
this不变
例如：
const obj = { name: 'inner' };
const arrow = (a, b) => console.log(this.name, a, b);
const bound = arrow.bind({ name: 'bound' }, 10);
bound(20); // 输出：undefined 10 20（若在模块中定义），或 window.name 10 20（若在非严格全局中）
什么时候容易踩坑？
常见误用场景包括：
- 试图用
setTimeout(() => {...}, 100).bind(obj)让箭头函数内的this指向obj—— 失败 - 在事件监听器中写
el.addEventListener('click', () => {...}.bind(this))——bind白加，this早已固定 - 用
Math.max.apply(Math, arr)替换为箭头函数封装后，再调用.call()—— 语法可能报错，且逻辑无意义
该怎么正确处理 this 绑定需求？
如果需要动态控制 this，就不要用箭头函数：
- 改用普通函数声明或表达式：
function() { ... }或function fn() { ... } - 需要预绑定时，用
bind；需要立即执行并指定this时，用call或apply - 若必须用箭头函数（比如保持外层
this），那就接受它不可变的事实，避免做无用的绑定尝试
