如何从 canvas.onmousemove 函数外部访问全局变量？

如何解决如何从 canvas.onmousemove 函数外部访问全局变量？

我有一个由 chartJs 驱动的画布来显示图表。我定义了一个 onmousemove 函数，如下所示 操作变量

myVariable = false;
ctx: any;
@ViewChild("mychart") mychart;

ngAfterViewInit()
{
   this.canvas.onmousemove = function(e) {
      this.myVariable = true;
    };
}

不幸的是，它说 myVairable 未定义。如何在 onmousemove 触发时访问此变量？我也尝试过如下所示的 bind(this)，但没有奏效。

 this.canvas.onmousemove = (function(e) {
                console.log(this.myVariable);
        }).bind(this)

Stackblitz 示例 https://stackblitz.com/edit/angular-chart-js-zzqumr

解决方法

ngAfterViewInit() {
  console.log('A',this.myVariable)
  this.canvas.onmousemove = function(e) {
    console.log('onMouseMove',this.myVariable)
  }
}

如果我正确理解你的例子，你会得到

的输出

A myValue
onMouseMove undefined

但您也希望拥有 onMouseMove myValue。

您可以在 this 仍然可用时简单地存储对它的引用，并稍后在您的 onmousemove() 处理程序中使用它

ngAfterViewInit() {
  const self = this
  console.log('A',self.myVariable)
  this.canvas.onmousemove = function(e) {
    console.log('onMouseMove',self.myVariable)
  }
}

哪个应该输出

A myValue
onMouseMove myValue

,

function 有自己的 this 上下文，因此在函数体内调用 this 会访问函数而不是组件。 arrow function 不建立 this 范围，因此您可以从箭头函数内部以 this 的形式访问组件。

this.canvas.onmousemove = (e) => {
  this.myVariable = true;
  console.log(this.myVariable);
};