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

Posted 2023-03-25

【中文标题】如何从 canvas.onmousemove 函数外部访问全局变量？

【英文标题】：How to access global variable from outside of canvas.onmousemove function?

【发布时间】：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。

【参考方案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);
;