«
»

JavaScript OOP 入門編1

2009年8月13日

Filed under: JavaScript,オブジェクト指向 — admin @ 12:09 PM

JavaScriptはプロトタイプベースのオブジェクト指向言語です。
昨今ではJavaやC++、C#などによるクラスベースのオブジェクト指向言語が俗にいうオブジェクト指向と呼ばれてます。JavaScriptはプロトタイプベースというちょっと聞きなれないオブジェクト指向言語ですが、オブジェクト指向には代わりはないので、ようは慣れの問題なのかなぁと。

ということで、JavaScript歴6ヶ月程度の僕が、JavaScriptのオブジェクト指向講座を気が向いたらこのブログに書いていきます。

とりあえず入門編1ということで、簡易的なソースを書きます。

PLAIN TEXT
JavaScript:
  1. (function(){
  2.     if( !ahya ){
  3.         var ahya = {}
  4.         ahya = function(arg){
  5.             alert(arg);
  6.         }
  7.         ahya.prototype = {
  8.             message: function(e){
  9.                 return e;
  10.             }
  11.         }
  12.         var instance = new ahya('ahya');
  13.         alert( instance.message('ここにいれたテキストを表示') );
  14.     }
  15. })();

これを実行すると、アラートが2回表示されます。
1回目は、'ahya'、2回目は、'ここにいれたテキストを表示' （←これは自由に書き換えて良いです。）が表示されると思います。

さて、実際にはどんなことをしているのか、先ほどのソースに注釈を入れてみました。

PLAIN TEXT
JavaScript:
  1. (function(){
  2.     //ahyaオブジェクトがない場合、
  3.     if( !ahya ){
  4.         //ahyaオブジェクトを初期化
  5.         var ahya = {}
  6.         //ahyaオブジェクトのコンストラクタを定義
  7.         ahya = function(arg){
  8.             alert(arg);
  9.         }
  10.         //ahyaオブジェクトへprototypeを通じて、子要素を追加
  11.         ahya.prototype = {
  12.             //messageメソッドを追加
  13.             message: function(e){
  14.                 return e;
  15.             }
  16.         }
  17.         //ahyaオブジェクトからインスタンスを生成し、
  18.         //コンストラクタメソッドとmessageメソッドを実行
  19.         var instance = new ahya('ahya');
  20.         alert( instance.message('ここにいれたテキストを表示') );
  21.     }
  22. })();

これでだいたいやってることはわかると思います。
プロトタイプベースもクラスベースと書き方のイメージは似ていると思います。
型（クラス）をつくって、インスタンスを生成してコンストラクタがあればコンストラクタが実行されるという流れまでは同じかな？

次回からもっと突っ込んだことを書いていこうと思います。
今回はここまで！