【JavaScript】 ES5のオブジェクト指向の書き方

開発でES5でクラスを作る機会があったので、その備忘録用です。

最近では、ES6が主流だと思うので、あまり関心事項ではないですが。

ES5でのオブジェクト指向
まとめ

ES5でのオブジェクト指向

ES6以降では、Class構文が書けるようになったのでクラスを用いたプログラミングも簡単にできるようになってきました。
ただ、保守的な開発現場では、まだまだES5の書き方を使っているところもあるようです。

自分用としてES5でのクラスの作成～継承までをメモ

親クラス作成

まずは、親クラス（基底クラス）になるオブジェクトを作成

/**
 * 親クラス
 * Person
 *  
 */
function Person(name, age) {
    this.name = name;
    this.age = age;
    console.log("Construct Person Class!");
};

// Personクラスにプロトタイプメソッドを追加
Person.prototype.greeting = function() {
    alert("Hi!, Im "+this.name +".");
};


// Personクラスインスタンスを生成
var tarou = new Person("tarou", 25);

親クラスのコンストラクタには、プロパティを宣言。
プロトタイプメソッド　greetingを追加

※プロトタイプに格納するとインスタンスで共通したメソッドやプロパティを使うことができ、メモリの消費を抑える

子クラス作成

親クラスを作成した後に、継承先となる子クラスを作成

/**
 * 子クラス
 * Enginner
 * 
 * コンストラクタ
 */
function Enginner(name, age, work, langage) {
    // 親クラスのコンストラクタを結ばせる
    Person.call(this, name, age);　// 重要
    this.work = work;
    this.langage = langage;

    console.log("Construct Enginner Class!");
};

call関数は、外部のオブジェクトが持っているメソッドを自身のオブジェクトに結びつかせる関数。

継承

call関数でも、PersonクラスのコンストラクタをEnginnerクラスに結びつかせてはいるけど、
プロトタイプメソッドたちは結びついていない。
プロトタイプメソッドも子クラスのほうで使いたい（継承ってそういうもんだと思う）

/**
 * PersonクラスのプロトタイプオブジェクトをEnginnerクラスのプロトタイプオブジェクトにコピーする
 * 
 */
Enginner.prototype = Object.create(Person.prototype, {
    // ただしPersonクラスのコンストラクタの設定は下記のようにする
    constructor: {
        // プロパティを変更（削除や追加）できるように設定
        configurable: true,
        // オブジェクトのプロパティを列挙表示できるように設定
        enumerable: true,
        // プロパティに関連付けられた値を書き換えれるようにする
        writable: true,
        //　プロパティに関連付けられた値を設定（よくわかっていない。）
        value: Person
    }
});


/**
 * 子クラスのプロトタイプメソッド
 */
Enginner.prototype.showMyWork = function() {
    console.log("My Work is "+ this.work + " And I use " + this.langage);
};

親クラス子クラスが使える

あとは、親クラスと同様に子クラスのインスタンスを生成して使うだけ。

// Personクラスインスタンスを生成
var tarou = new Person("tarou", 25);
// Enginnerクラスインスタンスを生成
var keita = new Enginner("keita", 25, "Enginner", "JavaScript");

tarou.greeting(); // 親クラスのメソッド
keita.greeting(); // 親クラスのメソッド

keita.showMyWork(); // 子クラスのメソッド