ES5でのオブジェクト指向
ES6以降では、Class構文が書けるようになったのでクラスを用いたプログラミングも簡単にできるようになってきました。
ただ、保守的な開発現場では、まだまだES5の書き方を使っているところもあるようです。
自分用としてES5でのクラスの作成～継承までをメモ
- 親クラス作成
- 子クラス作成
- 継承
1. 親クラス Personを作成
まずは、親クラス（基底クラス）になるオブジェクトを作成
親クラス Person
/**
* 親クラス
* 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を追加
※プロトタイプに格納するとインスタンスで共通したメソッドやプロパティを使うことができ、メモリの消費を抑える
2. 子クラスの作成
親クラスを作成した後に、継承先となる子クラスを作成
子クラス Enginnerクラス
/**
* 子クラス
* Enginner
*
* コンストラクタ
*/
function Enginner(name, age, work, langage) {
// 親クラスのコンストラクタを結ばせる
Person.call(this, name, age); // 重要
this.work = work;
this.langage = langage;
console.log("Construct Enginner Class!");
};
call関数は、外部のオブジェクトが持っているメソッドを自身のオブジェクトに結びつかせる関数。
3.継承
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(); // 子クラスのメソッド
まとめ
javascriptのクラス化＋継承をやってみました。
ES5の書き方をしているところ自体あんまりないと思うので、本当に自分用のメモ