如何在 class 方法中获取当前对象引用？

Question

平时在Java上开发，现在在研究JavaScript/HTML5Canvas的东西。从 Java 开发人员的角度来看，我遇到了一个奇怪的情况。

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

我声明了 class 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);
}

还有一个class方法来处理鼠标点击事件：

GameBoard.prototype.handleMouseClick = function(event) {

     alert(this.myProperty);

}

handleMouseClick()会显示undefined因为handleMouseClick()方法中的this引用了HTML5Canvas实例（boardCanvas).

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

我这里做错了什么？

谢谢。

Answer 1

您可以使用 bind 来为函数

设置 this

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

示例： http://jsbin.com/vutugi/1/

Answer 2

一个常见的约定是使用 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 的贡献）

如何在 class 方法中获取当前对象引用？

How to get the current object reference in a class method?

javascript