箭头函数与显式绑定在JS不同特性中的表现对比

先理清一个核心区别：箭头函数与显式绑定（call/apply/bind）虽然都涉及 this 的处理，但本质上是两种完全不同的机制。箭头函数没有自己的 this 绑定，仅沿词法作用域链向上查找；显式绑定则是强制覆盖运行时的 this，属于动态干预。这两者在不同 JavaScript 特性中的表现差异很大，关键取决于是否涉及上下文重置或调用控制。

箭头函数的 this 无法被任何显式绑定覆盖

箭头函数本身不具备 this 绑定能力，其 this 值在定义时即确定，并沿着作用域链向上查找，之后完全固定。

• 即使对箭头函数执行 call(obj, ...)、apply(obj, [...]) 或 bind(obj)，它的 this 依然保持原始值，不会指向传入的对象。
• 常见的误解是：有人试图用 bind 修正事件回调中的 this 指向，却误用了箭头函数——结果无效，因为箭头函数本身就无需这种修正。
• 通过示例更易理解：

  const obj = { name: 'Alice' };
  const arrow = () => console.log(this.name);
  arrow.call({ name: 'Bob' }); // 仍输出全局 name 或 undefined，而非 'Bob'

显式绑定仅对普通函数有效，优先级高于隐式绑定

只有具备自身 this 绑定能力的函数——即普通函数——才能被 call、apply、bind 更改执行上下文。

• call 和 apply 会立即调用执行，第一个参数即为新的 this；bind 则返回一个新函数，this 被“硬绑定”，后续无法再通过其他绑定方法覆盖。
• 显式绑定的优先级高于隐式绑定（例如 obj.fn() 形式），因此 obj.fn.call(otherObj) 中的 this 指向 otherObj，而非 obj。
• 需注意：若传入 null 或 undefined 作为 this 参数，在非严格模式下会自动替换为全局对象。

在类方法及事件回调中的典型对比

两者解决的是同一类问题——this 丢失——但采取相反的策略：

• 在类中定义普通方法时，若直接传给事件监听器（如 btn.addEventListener('click', this.handleClick)），隐式绑定会失效，this 指向事件目标或全局对象。此时可用 bind(this) 显式修复，或改用箭头函数语法（handleClick = () => { ... }）自动继承类实例的 this。
• 但箭头函数不适合需要动态 this 的场景。例如期望方法能被不同对象复用（如 obj1.method.call(obj2)），箭头函数不支持这种调用方式。
• 在 API 回调中（如 setTimeout、Promise.then），若需访问外层 this，箭头函数天然适用；而普通函数则必须借助显式绑定或闭包变量来保存 this。

构造函数与 new 绑定的兼容性

这是两者之间不可逾越的分水岭：

• 箭头函数不能用作构造函数。执行 new arrowFn() 会直接抛出错误（TypeError: arrowFn is not a constructor），因其没有 prototype 属性，也不支持 new 绑定。
• 显式绑定的方法（如 bind 返回的 bound 函数），若原函数是构造函数，则 new boundFn() 依然可正常实例化，this 指向新实例，不受之前 bind 的影响——这是 bind 的特殊设计。
• 因此，当需要同时支持普通调用和构造调用时，只能选择普通函数配合显式绑定，箭头函数完全不适用。