为何箭头函数无法通过bind()改变this指向？

没错，你观察得非常准确——箭头函数确实会让bind()（包括call()、apply()）完全失效，根本原因在于箭头函数对this的处理机制和普通函数有着本质区别。

核心原理：箭头函数的this是“词法绑定”的 #

箭头函数没有属于自己的this，它的this是在定义时就从外层作用域（包含它的普通函数或全局作用域）继承而来的，而且这个绑定是永久的，后续任何试图修改this的操作都不会生效。打个比方，箭头函数的this就像被焊死在了定义它的上下文里，bind、call这些工具根本撬不动它。

结合你的代码具体分析 #

第一段箭头函数代码

const data = { x: "Target" } 
let bar = () => { console.log(this.x) } 
let final = bar.bind(data); 
final(); // 输出undefined

这里bar箭头函数定义在全局作用域下（假设是浏览器环境），所以它的this直接继承自全局作用域的window对象（如果是严格模式下则是undefined）。哪怕你用bind(data)尝试把this绑定到data对象，调用final()时，箭头函数内部的this还是原来的全局this——而全局this里并没有x属性，自然输出undefined。

第二段普通函数代码

const data = { x: "Target" } 
let bar = function(){ console.log(this.x) } 
let final = bar.bind(data); 
final(); // 输出"Target"

普通函数的this是调用时绑定的：默认调用时this指向全局，作为对象方法调用时指向该对象，而bind()的作用就是创建一个新函数，强制让这个新函数调用时的this固定指向传入的对象。所以这里final()调用时，this被牢牢绑定到data，自然能正常输出data.x的值。

小补充：如果想让箭头函数访问data的属性怎么办？ #

不需要用bind，直接在箭头函数里引用data.x即可，或者把逻辑放在普通函数里：

const data = { x: "Target" } 
let bar = () => { console.log(data.x) } 
bar(); // 输出"Target"

内容的提问来源于stack exchange，提问作者J Seabolt