Question

我在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语句，则会调用警报。在Game.js中调用时，this.blueDeck[0].setDeckPos(w, h);等其他函数可以正常工作。

为什么包含没有返回true？

Answer 1

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

使用闭包：

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

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

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

详细了解this：

MDN - this（一般）
quirksmode.org - this（强调事件处理程序）

Answer 2

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实例调用，而是由事件监听器调用。请记住，此是通过调用设置的。

JS函数没有返回值

2 个答案:

修改