ES6のクラス構文でオブジェクト指向な電卓を実装
JavaScriptやオブジェクト指向の初心者のため、不備やより良い記法があればご指摘いただけると幸いです
コードの全容は以下
https://github.com/dstnk0208/CalclatorOOP/
JavaScriptのクラス構文について
- ES6から導入
- 実態はprototypeベースのシンタックスシュガー
- 以下の記事が大変参考になる
仕様概要
- 四則演算ができる
- 演算は入力順に行う
- 1 + 2 * 3 = 9とする (7ではない、いわゆる逆ポーランド記法には非対応)
- 小数点は非サポート(入力や演算結果で出力はされるが、実装では表示のコントロールなどはしない)
クラス設計
データ構造にはスタックを採用。Arrayオブジェクトを流用でき、逆ポーランド記法でも使われてるため
0除算のエラーなどにカスタムエラークラスを実装
カスタムエラーの実装には以下を参考した
実装
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のクラス構文を使ってオブジェクト指向な電卓を実装した
- カスタムエラークラスも実装してみた