将按钮绑定到Dice类

Question

我正在尝试创建一类与D&D完全相同的骰子集，这样在按下按钮时，我就可以掷骰子并将其记录到控制台。我以为这会是一件非常简单的事情，但我确实遗漏了一些东西。这是我到目前为止所拥有的。

class Dice {
  constructor (sides) {
  this.sides = sides;
  }
  roll () {
    console.log(Math.floor(Math.random() * this.sides) + 1);
}}
const d4 = new Dice (4);
const d6 = new Dice (6);
const d8 = new Dice (8);
const d10 = new Dice (10);
const d12 = new Dice (12);
const d20 = new Dice (20);
const d100 = new Dice (100);

const btn = document.getElementById('button');
btn.onclick = d20.roll;

我现在得到的是"NaN"，我想我理解为“this”指的是按钮按下，而不是d20对象，因此“sides”属性是未定义的，这给了我一个未定义的答案。我想也许我必须把'this‘绑定到这个类上，比如

btn.onclick = d20.roll.bind(this);

但我还是得到了NaN..。我不知道这是怎么回事。

Answer 1

哇，经过一个小时的努力我解决了我自己的问题...我只是简单地将roll方法更改为箭头函数。

roll = () => {
    console.log(Math.floor(Math.random() * this.sides) + 1);
}

现在我得到了预期的结果，而不需要绑定按钮。谁知道呢..。