javascript - 如何在类方法中获取当前对象引用？

Question

平时都是用Java开发的，现在在研究JavaScript/HTML5 Canvas的东西。从 Java 开发人员的 Angular 来看，我遇到了一个奇怪的情况。

html页面上有一个html5 Canvas 对象，我想跟踪这个 Canvas 上的鼠标点击事件。

我声明了类 GameBoard 并初始化了它的属性:

function GameBoard() {
  // defining a property for GameBoard class instance
  this.myProperty = 'some text here';

  // getting canvas element
  this.boardCanvas = document.getElementById("myCanvas");

  // setting the mouse click event listener
  this.boardCanvas.addEventListener("mousedown", this.handleMouseClick, false);
}

还有一个类方法来处理鼠标点击事件:

GameBoard.prototype.handleMouseClick = function(event) {

     alert(this.myProperty);

}

handleMouseClick() 将显示 undefined 因为 handleMouseClick() 方法中的 this 引用了 HTML5 Canvas 实例(板 Canvas )。

我的问题:如何在 handleMouseClick 方法中引用当前的 GameBoard 类实例来获取类构造函数中定义的 myProperty 字段值？

我做错了什么？

谢谢。

Answer 1

一个常见的约定是使用 this 的别名，通常带有一个名为 self 的变量:

function GameBoard() {
    // defining alias
    var self = this;

    this.myProperty = 'some text here';
    this.boardCanvas = document.getElementById("myCanvas");

    this.handleMouseClick = function()
    {
        // using alias
        alert(self.myProperty);
    };

    this.boardCanvas.addEventListener("mousedown", this.handleMouseClick, false);
}

但是，由于您是在此处定义 prototype 上的方法，因此您可以使用 bind(如@Alexander 所建议的那样)或试试这个:

var self = this;

this.boardCanvas.addEventListener("mousedown", function(e)
{
    // calling the function with 'self/this' context
    self.handleMouseClick(e);
}, false);

(感谢@Alexander 的贡献)