调用者上下文中的 Javascript 调用方法

Question

我如何在实例化对象中调用方法，但在另一个对象的上下文中实例化对象。

最好的解释方式是用这个简短的例子..

游戏.js

var ball = new Ball();
ball.addMotionListener(function(){this.color = someNewRandomColor});

内部 ball.js

Ball = class{
  constructor(){
    this._position = new Vector(0,0);
    this._color = red;
    this._onChangeManager = new OnChangeManager();
  }

  addMotionListener(listener){
    this._onChnangeManager.addMotionListner(listener);
  }

  set position(newP){ 
    this._position = newP; 
    this._onChangeManager.motionEvent();
  }

}

以及 onChangeManager.js

OnChangeManager = class{
  constructor{ this._motionListenerQueue = [] }

  addMotionListener(newListener){
    this._motionListenerQueue.push(newListener);
  }

  motionEvent(){
    for(listener in _motionListenerQueue){
      listener();
    }
  }
}

现在在 game.js 中

kickBall(ball);

它改变球的位置，触发 onChangeManager 中的运动事件监听器，目的是改变球的颜色。当然，这是行不通的，因为 this.color 位于 ball 的上下文中，而不是 onChangeManager 的上下文中。

是否可以在 onChangeManager 对象中但在球的上下文中运行方法？

编辑:抱歉，这个问题很简单/重复，我不熟悉 js 上下文

Answer 1

您可以使用 Function.prototype.bind 将上下文绑定(bind)到作为回调传递的函数。 :

var ball = new Ball();
ball.addMotionListener(function() {
    this.color = someNewRandomColor
}.bind(ball));

附注在回调中，您引用的是 color 属性，而在 Ball 构造函数中，有 _color 属性。我不确定这种差异是否是有意为之。