javascript - JS函数没有返回值

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");
}

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

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？

Answer 1

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

使用闭包:

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

或者，如果您不需要访问该元素，则可以使用 .bind ^[MDN] (请参阅此链接，了解没有 native 支持的浏览器的填充):

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

了解有关此的更多信息:

• MDN - this (一般)
• quirksmode.org - this (强调事件处理程序)