prototype.jsでクラス定義

Javascript 30分プログラム

30分プログラム、その125。prototype.js風のクラス定義を勉強してみる。

prototype.jsだと

Hoge = Class.create();
Hoge.prototype = {
  initialize: function(){
    // ...
  },
  f: function(){
    // ...
  },
  g: function(){
    // ...
  }
};

といった書き方ができる。

普通の

function Hoge(){
  // ...
}
Hoge.prototype.f = function(){
  // ...
}

Hoge.prototype.g = function(){
  // ...
}

よりも、クラスごとにネストされているのが素敵だと思う。

使い方

$ js proto.js
* Counter
inc 2 times
Before: 0
After:  2
---
* BigCounter
inc 2 times
Before: 0
After:  20
---

ソースコード

// include
document = {
   evaluate:null
};
window = {};
navigator = { appVersion:'' };
load('js/prototype.js');

// main

// prototype.js風クラス定義
Counter = Class.create();
Counter.prototype = {
   initialize: function(){
      this.current = 0;
   },
   inc: function(){
      this.current ++;
   },
   dec: function(){
      this.current --;
   }
};

// 継承
BigCounter = Class.create();
Object.extend(BigCounter.prototype, Counter.prototype);
Object.extend(BigCounter.prototype, {
   inc:function(){
      this.current += 10;
   }
});


// テスト
function f(c,n){
   var n = n || 3;

   print('inc '+n+' times');
   print('Before: ' + c.current);
   (n).times(c.inc.bind(c));
   print('After:  ' + c.current);
   print('---');
}

print('* Counter');
f(new Counter,2);

print('* BigCounter');
f(new BigCounter,2)

参考