JavaScript クラス #2

株式会社リュディアです。JavaScript クラス #1 に続きクラスについてまとめていきます。掲載するソースコードはすべて GAS の開発環境で動作確認をしています。

JavaScript クラス #1 ではオブジェクトを定義するクラスについて、また new を使って具体的なオブジェクトを生成し、この生成したオブジェクトをインスタンスと呼ぶことについてまとめました。まず JavaScript クラス #1 で使ったコードを以下に示します。

class manipulatorManager {
 constructor( arg1, arg2 ) {
   this._a = arg1 ;
   this._b = arg2 ;
 }
 add( ) { return this._a + this._b ; }
 sub( ) { return this._a - this._b ; }
 mul( ) { return this._a * this._b ; }
 div( ) { return this._a / this._b ; }
}

function myFunction2() {
 const manipulator = new manipulatorManager( 10, 2 );
 console.log( manipulator.add() ) ;
 console.log( manipulator.sub() ) ;
 console.log( manipulator.mul() ) ;
 console.log( manipulator.div() ) ;
}

// 実行結果
// 12
// 8
// 20
// 5

今回はクラス定義の記述を見ていきましょう。constructor ( ) については JavaScript クラス #1 について説明しましたので、今日はメンバ関数について説明します。クラスの中で add( ), sub( ), mul( ), div( ) の 4 つの演算用関数を定義しています。このようにクラスの中で宣言する関数をメンバ関数と呼びます。ここで注意してほしいのは今回の関数には引数がありません。演算対象はどうなっているのでしょうか？

インスタンス化する際の初期化処理、つまり constructor で 10, 2 という 2数をオブジェクト内で設定しています。4 つのメンバ関数はこれら 2 数を使った演算をするよう定義しています。

では、これらメンバ関数を利用するにはどうすればよいでしょうか？何度も記載しますがインスタンス manipulator は初期化処理で 10, 2 という 2 数を保持するよう設定されています。ここでインスタンス manipulator は関数も保持しているので、演算用関数を使う場合は"インスタンス + メンバ関数" で呼び出します。具体的には manipulator.add( ) とすることで加算関数を呼び出します。データも演算用関数もすべてインスタンスが持っているので"インスタンス manipulator のもつ add( )" という意味で manipulator.add( ) と呼び出します。他の演算子についても同様の呼び出しになります。

簡単なクラスの例、オブジェクトの生成方法、つまりインスタンス化、メンバ関数の呼び出し方法についてまとめました。単純な例ですがJavaScript によるオブジェクト指向プログラミングの雰囲気をつかんでいただけたか、と思います。次回からは実際に使える例を挙げていきたいと思います。

では、ごきげんよう。