JavaScript/OOP/クラスの作り方/関数オブジェクトを使ったクラス作成 - 応用のバックアップ(No.3)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
JavaScript/OOP/クラスの作り方/関数オブジェクトを使ったクラス作成 - 応用へ行く。

クラス（オブジェクト）の作り方

オブジェクト生成

 var obj = new Object();
 obj.name = 'taro';
 obj.say = function () { alert("hello, " + this.name); };

を省略して、

 var obj = { name : "taro", 
            say  : function() { alert("hello, " + this.name); } 
 };

クラス定義

空のクラス定義

 var Person = function() {};

コンストラクタ付きのクラス定義

 var Person = function(name) {
     this.name = name;
     this.say = function() { alert("hello, " + this.name); };
 };

インスタンス生成

 var person = new Person("taro");
 person.say();

プロトタイプによるメソッド追加

 Person.prototype = {
     say2: function() {
         alert("hello2, " + this.name);
     }
 };
 person.say2();

この方法でArrayのような組込みクラスを拡張する事が可能だが、安易に拡張するとfor inでオブジェクトのプロパティを列挙すると拡張したプロパティ（メソッド）と元のプロパティ（メソッド）が混ざってしまう（prototype汚染）ので注意が必要。

継承

 var Person = function(name) { this.name = name; };                       // 親クラス作成
 Person.prototype = { say: function() { alert("hello, " + this.name) } };
 var Man = function(name) { this.name = "Mr." + name; };                  // 子クラス作成
 Man.prototype = new Person;                                              // 親クラスを継承
 var m = new Man("taro");
 m.say();

prototype継承の注意点

なお、継承のために、

 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(); // 本来、未定義であるべき

Prototype.jsを使って継承

 var Woman = Class.create();                       // クラス定義
 Object.extend(Woman.prototype, Person.prototype); // 継承
 Object.extend(Woman.prototype,{                   // メソッドのオーバーライド
     initialize: function(name) {
                     this.name = "Miss." + name;
                 }
 });
 var w = new Woman("hanako");
 w.say();