如何在JavaScript类方法回调场景中获取正确的this指向

问题复现说明 #

你给出的代码存在一处笔误：mybar.b(myfoo.f()) 是先执行myfoo.f再将返回值undefined传入方法b，要复现this指向异常的问题，需要改为传递函数引用：mybar.b(myfoo.f)。

解决方案（类场景专属） #

• 方案1：构造函数内手动绑定this
  在foo类的构造函数中，将方法f提前绑定到当前实例，后续无论怎么传递方法引用，this都固定指向原实例：

class foo{
  constructor(){
    this.x = 10
    // 绑定this到当前实例
    this.f = this.f.bind(this)
  }
  f(){console.log(this.x)}
}

• 方案2：使用类箭头函数字段
  直接将方法定义为类的箭头函数字段，箭头函数的this继承自定义时的外层作用域（也就是类实例的this），不会随调用上下文变化：

class foo{
  constructor(){this.x = 10}
  // 箭头函数字段，this固定指向实例
  f = () => {console.log(this.x)}
}

• 方案3：传递回调时用箭头函数包裹
  传参时不直接传递方法引用，在外层包一层箭头函数，主动在原实例上下文中调用方法：

mybar.b(() => myfoo.f())

this动态绑定规则的设计原因 #

1. 适配前端原生交互场景：JavaScript最初设计目标是作为浏览器端脚本处理DOM交互，this动态绑定可以让事件回调的this直接指向触发事件的DOM元素，无需额外传递元素实例，简化事件处理代码的编写。
2. 提升函数复用性、降低内存开销：早期JS运行性能较差，动态this可以让同一个函数复用给多个不同的对象，不需要每个对象都单独复制一份函数实例，既节省内存，也支持了call/apply/bind这类“借用方法”的灵活用法，比如把数组的切片方法用于类数组对象的操作Array.prototype.slice.call(arguments)，就是这套规则的典型应用场景。

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