如何在JavaScript类构造函数中传入可访问实例属性的自定义函数

报错根因 #

当前代码的问题由JavaScript箭头函数的this绑定规则导致：

• 箭头函数的this是词法静态绑定，在函数定义阶段就绑定到外层作用域的this，无法在运行时通过call/apply/bind修改
• 你在全局作用域定义传入的箭头函数时，外层this在类默认的严格模式下为undefined，因此无法访问类实例的x、y属性

最优解决方案 #

将传入的回调改为普通函数，在构造函数内调用时将this绑定为当前类实例即可，无需手动传递任何参数：

class myClass {
 constructor (x, y, myFunction) {
   this.x = x;
   this.y = y;
   // 绑定当前实例为回调的this上下文
   myFunction.call(this);
 }
}

const y = new myClass(10, 5, function() {
  console.log(this.x);
});

const z = new myClass(11, 5, function() {
  console.log(100 + this.y);
});

运行后即可得到预期输出：

10
105

该方案下回调可以直接通过this访问实例的所有公开属性、方法，即使后续实例属性动态更新，再次调用回调时也能拿到最新值，完全符合你的需求。

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