* クラスの作り方 - 関数オブジェクトを使って [#ee1faea0]
** クラスを定義 [#u48ec2eb]
*** 空のコンストラクタ [#ga5b2288]
var Person = function() {};
関数オブジェクトをクラス(のコンストラクタ)に見立てる。
*** コンストラクタでメソッドやフィールドを定義[#fc448499]
thisを使ってクラスのプロパティにアクセスする。
var Person = function(name) {
this.name = name;
this.say = function() {
alert("hello, " + this.name);
};
};
ただし、この方法はインスタンス生成ごとにメソッドを定義する事になり、メモリ効率が悪い。これを避けるには、↓のようにプロトタイプによるメソッドやフィールドを定義を行う。コンストラクタで定義するのはフィールドだけにしておく。
*** クラスにプロトタイプでメソッドやフィールドを定義[#n7668f55]
Person.prototype = {
say2: function() {
alert("hello2, " + this.name);
}
};
:プロトタイプ汚染|この方法でArrayのような組込みクラスを拡張する事が可能だが、安易に拡張するとfor inでオブジェクトのプロパティを列挙すると拡張したプロパティ(メソッド)と元のプロパティ(メソッド)が混ざってしまう(プロトタイプ汚染)ので注意が必要。
** クラスのインスタンスを生成・利用 [#m5dce2e9]
var person = new Person("taro");
person.say();
** クラスの継承 [#w1db1e89]
*** 親クラス作成 [#ac0cfa4d]
var Person = function(name) {
this.name = name;
};
Person.prototype = {
say: function() {
alert("hello, " + this.name);
}
};
*** 子クラス作成 [#q7f19729]
var Man = function(name) {
this.name = "Mr." + name;
};
*** 親クラスを継承 [#ae15c212]
Man.prototype = new Person;
*** 子クラスにメソッドを定義 [#ydf071ca]
Man.prototype.say2 = function () {
alert("hello2, " + this.name);
}
*** 子クラスのインスタンスを作成・利用 [#y877eb40]
var m = new Man("taro");
m.say();
m.say2();
*** プロトタイプチェイン [#efb4d835]
メソッドの検索は次の順で行われる。
- m.say()
- Man.prototype.say()
- Person.prototype.say()
- Object.prototype.say()
親クラスを辿って行き、最終的にObject.prototypeで見つからなければ、終了する。
*** プロトタイプ継承の注意点 [#fbdffe52]
なお、継承のために、
Man.prototype = new Person;
ではなく、
Man.prototype = Peroson.prototype;
としてはならない。この場合、ManのprototypeはPersonのprototypeを参照する事になるので、
Man.prototype.say2 = function () { alert('hello2') };
のようにManにメソッドを追加すると、Personにもメソッドが追加されてしまう。
var p = new Person();
p.say2(); // 本来、未定義であるべき
** JavaScriptのクラス(オブジェクト)の問題点 [#e4ecfe17]
- 親クラスのコンストラクタ(メソッド)を呼び出すのが難しい。
- 多重継承が難しい。
これらを解決するには、何らかのライブラリを使うのが妥当。
** 参考 [#ie9c838e]
:Defining classes and inheritance | http://prototypejs.org/learn/class-inheritance
:A Base Class for JavaScript Inheritance | http://dean.edwards.name/weblog/2006/03/base/
:Simple JavaScript Inheritance | http://ejohn.org/blog/simple-javascript-inheritance/