ES6のクラス構文でオブジェクト指向な電卓を実装

JavaScriptやオブジェクト指向の初心者のため、不備やより良い記法があればご指摘いただけると幸いです

コードの全容は以下
https://github.com/dstnk0208/CalclatorOOP/

JavaScriptのクラス構文について

ES6から導入
実態はprototypeベースのシンタックスシュガー
以下の記事が大変参考になる
- https://www.hypertextcandy.com/object-oriented-javascript

仕様概要

四則演算ができる
演算は入力順に行う
- 1 + 2 * 3 = 9とする (7ではない、いわゆる逆ポーランド記法には非対応)
小数点は非サポート(入力や演算結果で出力はされるが、実装では表示のコントロールなどはしない)

クラス設計

データ構造にはスタックを採用。Arrayオブジェクトを流用でき、逆ポーランド記法でも使われてるため
0除算のエラーなどにカスタムエラークラスを実装
カスタムエラーの実装には以下を参考した

https://qiita.com/necojackarc/items/c77cf3b5368b9d33601b

実装

Stackクラス

class Stack {
    constructor() {
        this._a = [];
    }
    push(a) {
        try {
            // NaN or undefinedでカスタムエラーをスロー
            if ((!(a === a)) || (a === void 0)) {
                throw new InvalidInputException();
            }
            this._a.push(a);
        } catch (e) {
            if (e instanceof InvalidInputException) {
                console.log(e);
            } else {
                console.log('other error');
            }
        }
    }
    ...中略...

Calcクラス

class Calc {
//...中略...
    _div(v1, v2) {
        // 0除算でカスタムエラーをスロー
        if (v2 == 0) {
            throw new ZeroDevideException("Devided zero");
        }
        stack.push(v1 / v2);
    }
}

ZeroDiviceExceptionクラス

class ZeroDevideException extends Error {
    constructor(...params) {
        super(...params);
        Object.defineProperty(this, 'name', {
            value: this.constructor.name,
        });
        if (Error.captureStackTrace) {
            Error.captureStackTrace(this, ZeroDevideException);
        }
    }
}

カスタムエラーはErrorをextendsするだけでは、カスタムエラーのErrorTypeがスタックトレースから欠落するため、constructorのnameプロパティを上書きする

constructorのnameプロパティを上書きしなかった場合

Error
    at Calc._div (main.js:62)
    at Calc.calc (main.js:46)
    at onPushEqual (main.js:153)
    at HTMLButtonElement.onclick (index.html:32)

上書きした場合

ZeroDevideException
    at Calc._div (.././main.js:61:23)
    at Calc.calc (.././main.js:46:18)
    at onPushEqual (.././main.js:154:10)
    at HTMLButtonElement.onclick (.././index.html:32:45)

まとめ

ES6のクラス構文を使ってオブジェクト指向な電卓を実装した
カスタムエラークラスも実装してみた

参考