将按钮绑定到骰子 Class

Question

我正在尝试创建一个与 D&D 完全相同的 class 骰子集，以便在按下按钮时我可以掷骰子并将其记录到控制台。我认为这将是一件非常简单的事情，但我肯定缺少一些东西。这是我目前所拥有的。

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' 绑定到 class 做类似

的事情

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

但我仍然得到 NaN...我不确定此时发生了什么。

Answer 1

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

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

现在我不需要绑定按钮就可以得到预期的结果。谁知道...

将按钮绑定到骰子 Class

Binding a button to a Dice Class

bind

class

this

button