如何将按钮点击绑定到Dice类方法 解决D&D骰子roll方法返回NaN问题

你对this指向的判断是正确的，修改后依然报错的核心原因是bind绑定的对象错误：你在全局作用域中执行d20.roll.bind(this)时，这里的this指向的是浏览器全局对象window，window不存在sides属性，所以计算结果依然是NaN。

可用的解决方案如下：

• 方案1：直接将bind的绑定对象改为d20实例
  这是对你原有代码改动最小的方案，直接把绑定对象改成对应的骰子实例即可：

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

• 方案2：用箭头函数包裹roll调用
  箭头函数的this会继承外层作用域的指向，外层作用域中d20就是目标实例，不需要额外绑定：

  btn.onclick = () => d20.roll();
  

• 方案3：在类定义时就将roll方法绑定到实例
  如果你希望后续所有调用roll的场景都不需要额外处理this指向，可以直接把类中的roll定义为箭头函数：

  class Dice {
    constructor (sides) {
      this.sides = sides;
    }
    // 改为箭头函数，this永久绑定当前实例
    roll = () => {
      console.log(Math.floor(Math.random() * this.sides) + 1);
    }
  }
  // 后续直接赋值即可，不需要额外bind
  btn.onclick = d20.roll;
  

内容的提问来源于stack exchange，提问作者HarrySIV