Question

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

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

我声明了类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，因为this方法中的handleMouseClick()是指HTML5 Canvas实例（boardCanvas）。

我的问题：我如何引用GameBoard方法中的当前handleMouseClick类实例来获取类构造函数中定义的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的贡献）

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

2 个答案: