Javascript でオブジェクト指向 クラス・メソッドの作成 ( prototype )

Pocket

本ページは、多言語でオブジェクト指向を使用したことはあるが、JavaScript は初めてといった人向けの入門的なページです。Javascript でクラスを作成し、そのクラスを使うサンプルコードを掲載しています。

正確には Javascript ではクラスではなく、すべてが関数らしいですが、このページではクラス・メソッドと表現しています

スポンサーリンク

クラス・メソッドのサンプル

まずは、実際にサンプルを見てみましょう。サンプルとしてしてはよくみる、四則演算を行うクラスです。

// 四則演算クラス
var Calc = function (x) {

    // コンストラクタ
    this.x = x;

    // 足し算メソッド
    this.add = function (num) {
        return this.x + num;
    }
    // 引き算メソッド
    this.sub = function (num) {
        return this.x - num;
    }
    // 掛け算メソッド
    this.mul = function (num) {
        return this.x * num;
    }
    // 割り算メソッド
    this.div = function (num) {
        return this.x / num;
    }
}

// インスタンスを生成する
var c = new Calc(10);

alert(  c.add(4)  );  // 14
alert(  c.sub(5)  );  //  5
alert(  c.mul(3)  );  // 30
alert(  c.div(2)  );  //  5

Java や .Net など多言語でオブジェクト指向を使ったことがある人にとっては、上記のサンプルコードがわかりやすいのではないでしょうか。サンプルでは、メンバ変数 x を this.x として定義し、コンストラクタで与えられたパラメータを代入しています。そして、this.関数名 = function() {} でメソッドを定義していると考えると多言語との対比がしやすいかと思います。

しかし、わかりやすい反面、パフォーマンス上の問題点を含んでいます。 それは、Calc クラスを何個も何十個もインスタンス化するような場合には、個々のメソッドがそれぞれメモリ上に 展開されますので、メモリを無駄に消費してしまいます。

この問題を解決するために Javascript の prototype を使用することができます。では、実際に上記のサンプルを prototype を使って書き直したスクリプトを以下に示します。

prototype を使ったクラスサンプル
// 四則演算クラス
var Calc = function (x) {
    
    // コンストラクタ
    this.x = x;
}

// プロトタイプの追加(足し算メソッド)
Calc.prototype.add = function (num) {
    return this.x + num;
}
// プロトタイプの追加(引き算メソッド)
Calc.prototype.sub = function (num) {
    return this.x - num;
}
// プロトタイプの追加(掛け算メソッド)
Calc.prototype.mul = function (num) {
    return this.x * num;
}
// プロトタイプの追加(割り算メソッド)
Calc.prototype.div = function (num) {
    return this.x / num;
}

// インスタンスを生成する
var c = new Calc(10);

alert(  c.add(4)  );  // 14
alert(  c.sub(5)  );  //  5
alert(  c.mul(3)  );  // 30
alert(  c.div(2)  );  //  5

プロトタイプとしてメソッドを追加しています。インスタンスを何個、何十個と生成しても プロトタイプに追加したメソッドは、個々のインスタンスごとにメモリ上に展開されることはなくなり、メモリの消費量が減少します。もちろん this.x で定義したメンバ変数は、個々のインスタンスに別々に領域が確保されるので、互いに干渉されることはありません。クラス内にメソッドを記述していないので違和感があるかもしれませんが、慣れで解決するかもしれません。

こちらの『 Javascript でオブジェクト指向 オーバーライドとオーバーロード 』では、本サンプルを元にオーローロードとオーバーライドに関して説明していますので、よろしければ参照ください。

 

スポンサーリンク


Pocket

Leave a Comment

Your email address will not be published. Required fields are marked *