0

我在 Game.js 中有这个功能

Game.prototype.onClick = function(event){
     var x = event.x;
     var y = event.y;
     if (this.blueDeck[0].contains(x, y)) 
       alert("Blue Deck Clicked");
}

在 Main.js 中从此函数调用OnClick

canvas.addEventListener('mouseup', game.onClick, false);

我在 Card.js 中有这个功能

Card.prototype.contains = function(x, y){
    return true;
}

警报永远不会出现。

如果我删除onClick中的 if 语句，则会调用警报。this.blueDeck[0].setDeckPos(w, h);在 Game.js 中调用时，其他功能（例如）可以正常工作。

为什么contains不返回 true？

4

2 回答 2

2

更新证实了我的假设。this将引用 DOM 元素。的值this在运行时确定，即它取决于函数的调用方式，而不是定义的位置/方式。

要么使用闭包：

canvas.addEventListener('mouseup', function(event) {
    game.onClick(event);
}, false);

或者如果您不需要访问该元素，您可以使用.bind [MDN]（请参阅此链接以获取不支持本机支持的浏览器的 polyfill）：

canvas.addEventListener('mouseup', game.onClick.bind(game), false);

了解更多this：

于 2012-08-06T23:56:03.417 回答
0

OP 的一个简单示例有效，因此错误在其他地方：

function Game(){
  this.blueDeck = [new Card()];
}

Game.prototype.onClick = function(event){
     var x;
     var y;
     if (this.blueDeck[0].contains(x, y)) 
       alert("Blue Deck Clicked");
}

function Card(){}

Card.prototype.contains = function(x, y){
    return true;
}

var g = new Game();
g.onClick(); // "Blue Deck Clicked"

编辑

编辑问题时，请清楚地标记编辑。请参阅 Felix 的回答，该方法不是由 Game 的实例调用，而是由事件侦听器调用。请记住，这是由调用设置的。

于 2012-08-06T23:58:36.767 回答