JavaScript匿名函数中this指向失效问题的原因及解决方法

咱们一步步把这几个现象说透，核心就是箭头函数和普通函数对this的绑定逻辑天差地别：

1. 普通函数的this为啥能正常工作？ #

普通函数的this是调用时动态绑定的——谁调用它，this就指向谁。当你执行a.printName.call(b)时，call方法直接强制把printName内部的this替换成了b对象，所以函数能正确读取b的parent和child属性，输出float bear完全符合预期。

2. 箭头函数为啥输出undefined undefined？ #

箭头函数的this是**词法绑定（定义时绑定）**的——它的this在定义的那一刻就固定死了，永远指向它外层作用域的this。注意：对象本身不能形成独立的作用域，你在a对象里定义箭头函数时，它的外层作用域是全局作用域（浏览器里是window，Node.js里是global），而全局对象里并没有parent和child属性。

更关键的是：箭头函数的this无法被call/apply/bind修改，哪怕你传了b进去，箭头函数里的this还是死死盯着全局，自然就输出undefined undefined了。

3. 箭头函数参数写this为啥报错？ #

箭头函数从设计上就没有属于自己的this，它的this是从外层作用域继承来的，所以你不能把this当作参数名来使用——这属于语法违规，JS引擎直接就会抛出Unexpected token this的错误。

根据你的需求（需要通过call动态切换this指向），最直接的修复方式有两种：

方案一：换回普通函数 #

这是最直观也最符合需求的写法，就是你第一个例子的正确代码：

let a = { 
  parent: "roger", 
  child: "bear", 
  printName: function() { console.log(`${this.parent} ${this.child}`) } 
}
b = { parent: "float", child: "bear" }
a.printName.call(b) // 输出 float bear

方案二：如果非要用箭头函数（不推荐，仅作演示） #

如果你因为某些场景必须用箭头函数，可以通过外层普通函数来传递this，让箭头函数捕获这个this：

let a = {
  parent: "roger",
  child: "bear",
  printName: function() {
    // 箭头函数捕获当前普通函数的this
    const innerPrint = () => console.log(`${this.parent} ${this.child}`);
    innerPrint();
  }
}
b = { parent: "float", child: "bear" }
a.printName.call(b) // 输出 float bear

不过这种写法多此一举，除非你有特殊的闭包需求，否则优先用方案一。

内容的提问来源于stack exchange，提问作者Rajdeep Chatterjee