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

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
JavaScript/OOP/クラスの作り方/関数オブジェクトを使ったクラス作成 - 応用へ行く。
- 1 (2009-06-07 (日) 12:09:53)
- 2 (2009-10-10 (土) 18:07:01)
- 3 (2009-11-09 (月) 12:07:31)
- 4 (2009-11-09 (月) 16:42:49)
- 5 (2011-01-26 (水) 21:42:21)
- 6 (2011-07-14 (木) 20:20:16)
- 7 (2011-07-15 (金) 14:49:59)
- 8 (2011-07-26 (火) 02:26:48)
- 9 (2012-02-13 (月) 06:48:17)
- 10 (2012-07-24 (火) 16:14:12)
- 11 (2012-07-28 (土) 06:55:52)

関数オブジェクトを使ったクラス作成 - 詳細

クラスの作成

1. 空のコンストラクタ

 var Animal = function() {};

関数オブジェクトをクラスのコンストラクタに見立てる。

2. コンストラクタでメソッドやフィールドを定義

 var Animal = function(name, age) {
     this.name = name;
     this.age  = age;
      
     this.sayName  = function() { 
         alert("My name is " + this.name);
     };
 };

thisを使ってクラスのプロパティにアクセスする。
ただし、この方法はインスタンス生成ごとにメソッドを定義する事になり、メモリ効率が悪い。これを避けるには、↓のようにプロトタイプによるメソッドの定義を行う。

3. プロトタイプでメソッドを定義

 var Animal = function(name, age) {
    this.name = name;
    this.age  = age;
 };
 Animal.prototype = {
     sayName: function() {
         alert("My name is " + this.name);
     }
 };

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

4. プロパティもプロトタイプに乗せたい場合

 var Animal = function(name, age) {
     this.init.apply(this, arguments);
 };
 Animal.prototype.init = function (name, age) {
     this.name = name;
     this.age  = age;
  
     sayName: function() {
         alert("My name is " + this.name);
     }
 };

初期化メソッド（ここではinit()）を作って、コンストラクタではそれをapply()で呼ぶだけにする。
apply()とは JavaScript/文法/関数/call()とapply()。

インスタンスを生成・メソッドを利用

 var a = new Animal("Taro", 10);
 a.sayName();

継承

子クラスの作成 1

 var Dog = function(name, age) {
     this.name = name;
     this.age  = age;
 };
 Dog.prototype = new Animal;
 Dog.prototype.sayAge = function() {
     alert("My age is " + this.age);
 }

Dog.prototype = new Animal で継承を実現している。
Dog.prototype.sayAge = function()... でメソッドを子クラスに追加している。

子クラスのインスタンスを作成・メソッドを利用

 var d = new Dog("Jiro", 5);
 d.sayAge();

子クラスの作成 2（子クラスのコンストラクタで親クラスのコンストラクタを利用）

 var Dog = function(name, age) {
      Animal.call(this, name, age);
 };
 Dog.prototype = new Animal;
 Dog.prototype.sayAge = function() {
     alert("My age is " + this.age);
 }

子クラスの作成 1ではコンストラクタ内での処理を書き直す必要があるので、call()を使って、子クラスthisに親クラスのコンストラクタメソッドAnimal()を適用して、書き直す手間を省く。
call()とは JavaScript/文法/関数/call()とapply()。

prototypeのconstructorプロパティ

↑のままではDogクラスのprototypeのconstructorプロパティはAnimalなので、これをDogにする場合は↓のようにする。

 Dog.prototype = new Animal;
 Dog.prototype.constructor = Dog;