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

【问题标题】：How to access global variable from outside of canvas.onmousemove function?如何从 canvas.onmousemove 函数外部访问全局变量？
【发布时间】：2021-05-17 16:47:11
【问题描述】：

我有一个由 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

【问题讨论】：

如果你使用箭头函数而不是 function(e) 我相信会解决它。函数有自己的 this 上下文，但箭头函数会自动绑定并且没有自己的 this。

标签： javascript angular typescript html5-canvas chart.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：