javascript - 如何在 javascript 的类中正确添加事件侦听器？

Question

我昨天发现JS中有类。所以我开始玩一点点，但我的代码不正确：

var someImg = "blabla.png";
class Piece {
    constructor(position, image, value) {
        this.image = image;
        this.position = position;
        this.value = value;
    }
    setPieces() {
        document.getElementById(this.position).innerHTML = "<img width='50' src='" + this.image + "'>";
        document.getElementById(this.position).addEventListener("click", this.ShowMoves);
    }
    showMoves() {
        console.log(this) //shows html element (<div class=...), instead of an object
        this.value = "new value"; // so this doesn't work
    }
}
piece = new Piece("someid", someImg, "some value"); 
piece.setPieces();

基本上，我在这里要做的是将onclick事件附加到每个调用setPieces()方法的对象，然后使用该对象。但是，this关键字返回的是HTML element，而不是object。我想我明白为什么会发生这种情况，但无法弄清楚添加点击事件并且不会丢失我的对象的方法。

标签： javascriptclasseventsbinding