重新分配类函数时的奇怪Javascript行为

有一辆高级轿车和一辆高级机器人。Bot将car对象作为构造函数参数。此外，Car类具有setCollisionHandler函数，其行为类似于JavaScript中的object.setActionListener（func）。此setCollisionHandler在car对象中重新分配函数onCollision

输出：

Bot.onCollision: undefined
Bot.myfunc: 23

预期产出：

Bot.onCollision: 23
Bot.myfunc: 23

为什么会这样

类机器人{
建造师（汽车）{
this.x=23；//某个参数
这辆车；
this.car.setCollisionHandler（this.onCollision）；
}
myfunc（）{
console.log（'Bot.myfunc:'+this.x）；//Bot.myfunc:23
}
迎面而来{
console.log（'Bot.onCollision:'+this.x）；//Bot.onCollision:undefined//为什么它未定义？？
}
}
班车{
迎面而来{
console.log（'Original Car.onCollision'）；//从未按预期执行
}
setCollisionHandler（func）{
this.onCollision=func；
}
updateCorposition（）{
//更多代码
这个。onCollision（）；
//更多代码
}
}
汽车=新车（）；
bot=新bot（汽车）；
car.updateCorposition（）；
bot.myfunc（）；

那是因为当你打电话时

this.car.setCollisionHandler（this.onCollision）函数正在失去上下文。这在JS中是很常见的情况

您可以在此处执行以下操作：

this.car.setCollisionHandler（this.onCollision.bind（this））

或

this.car.setCollisionHandler（（）=>this.onCollision）
原因是
调用时，此
指的是
汽车
，而不是您期望的
机器人

通过使用
bind
将函数绑定回所需对象的实例，很容易修复：

this.car.setCollisionHandler(this.onCollision.bind(this));



类机器人{
建造师（汽车）{
this.x=23；//某个参数
这辆车；
this.car.setCollisionHandler（this.onCollision.bind（this））；
}
myfunc（）{
console.log（'Bot.myfunc:'+this.x）；//Bot.myfunc:23
}
迎面而来{
console.log（'Bot.onCollision:'+this.x）；//Bot.onCollision:undefined//为什么它未定义？？
}
}
班车{
迎面而来{
console.log（'Original Car.onCollision'）；//从未按预期执行
}
setCollisionHandler（func）{
this.onCollision=func；
}
updateCorposition（）{
//更多代码
这个。onCollision（）；
//更多代码
}
}
汽车=新车（）；
bot=新bot（汽车）；
car.updateCorposition（）；
bot.myfunc（）；