這是使用面向對象方法在 Javascript 中編寫這個小型計算器的最佳方式嗎？

Question

我是 OOJS 的新手。 我做了一個簡單的計算器。 表單提交后，它會創建一個對象並簡單地顯示結果。 我想知道這是否是在 OOJS 中編碼的最佳方式？

let form = document.forms['cal-form'];
form.addEventListener('submit', calculate);

  function calculate(e) {
    //prevent default form submission
    e.preventDefault();
    //get form values
    let num1 = parseInt(document.getElementsByTagName('input')[0].value);
    let num2 = parseInt(document.getElementsByTagName('input')[1].value);
    let op = document.getElementsByTagName('select')[0].value;

    //create object constructor function
    function Calculate(num1, num2, op){
      this.num1 = num1;
      this.num2 = num2;
      this.op = op;
    }

    Calculate.prototype.result = function() {
      let res;
      switch (op) {
        case 'add':
          res = this.num1 + this.num2;
          break;
        case 'sub':
          res = this.num1 - this.num2;
          break;
        case 'mul':
          res = this.num1 * this.num2;
          break;
        case 'div':
          res = this.num1 / this.num2;
          break;
        default:
          res= 'Error! No operation selected.';
      }
      return res;
    };

    //create an object
    let cal = new Calculate(num1, num2, op);
    //display result
    document.getElementById('result').innerHTML = cal.result();

  }
};

Answer 1

這可能是使用 class 的一個答案：

 class Calculator { add(a, b) { return a + b; } sub(a, b) { return a - b; } mul(a, b) { return a * b; } div(a, b) { if (b == 0) throw new Error('div by 0 not allowed'); return a / b; } } const a = 12; const b = 6; const cal = new Calculator(); const AplusB = cal.add(a,b); const AminusB = cal.sub(a, b); const AtimesB = cal.mul(a, b); const AdivB = cal.div(a, b); const results = [AplusB, AminusB, AtimesB, AdivB]; console.log(results);

我認為這種方法比你的方法更面向對象，因為我們可以說對象是計算器。 對我來說，像你一樣擁有一個Calculate對象很奇怪