- 2008-07-04 (金) 20:08
- javascript
ずっと疑問だったjavascriptのオブジェクト指向。。。
ようやくちょっと判明。
これがわかると、配布されているライブラリも拡張してより強力にすることができる!!
まずは~
JavaやC++、C#などのオブジェクト指向とはちょっと違います。
PHPのオブジェクト指向ともちょっと違います。
actionscriptのオブジェクト指向ともちょっと違います。
が!!
似てます。
激似です。
基本的に書き方としては、関数を定義するかのごとく書きます。
ただし、javascriptの場合、関数もデータとして扱えます。ここがミソ。
関数もほかの文字列や、数値、論理値のようにデータとして扱えちゃうのです。
ザッツ 「関数オブジェクト」 !!!!
仮に、
function test(){
・・・・・
}
という関数を定義したとしましょう。
この関数をオブジェクトとして扱えちゃいますので、
test.parame = 1;
とか
test.param2 = 2;
とか
test.param3 = 3;
とかできちゃいます。(厳密にはこれは、オブジェクトプロパティとか呼ばれる代物です。)
じゃ~、関数にプロパティが設定できるし、関数もデータとして扱えるから、プロパティとして関数を設定して、メソッドとしてしまえばいいじゃん!!
ということなんです。超簡単に言えば・・・。厳密さに問題があるかもしれません。
じゃ~、具体的に tashizan というクラスを作って、引数として渡された2つの値を加算した結果を返すメソッドを持たせましょう。。。
function test(a, b) {
//thisで自分自身をさしています。
//自分の x とういプロパティに引数 a を
//自分の y というプロパティに引数 b を設定してあげます。
//関数をオブジェクトとして扱い、それにプロパティを設定する感じ
this.x = a;
this.y = b;
}
//次に、メソッドを設定しますが、ここで仮に
function test(a, b) {
//thisで自分自身をさしています。
//自分の x とういプロパティに引数 a を
//自分の y というプロパティに引数 b を設定してあげます。
//関数をオブジェクトとして扱い、それにプロパティを設定する感じ
this.x = a;
this.y = b;
this.tashizan = function() {
return this.x + this.y;
}
}
といった具合でJava等のような感覚でメソッドを定義すると、インスタンスを生成する度に、各々のインスタンスが同じメソッドを持った状態で生成されてしまいます。
ザッツ もったいない!!!!!
ということで、登場するのが
prototypeオブジェクト
これ、どういう代物かと申しますと、
クラス共通のメソッドやら、プロパティを設定できるというもの。
もっと詳しくいいますと、各々のインスタンスは、この prototypeオブジェクト からプロパティを継承しているという内容だそうです。
ですので、この prototypeオブジェクトに対して、そのクラス共通のメソッドだの、プロパティを設定してあげるとよろしいそうで。
ではもう一度、コードに戻りまして、先ほどののfunction test(a, b)・・・は
function test(a, b) {
//thisで自分自身をさしています。
//自分の x とういプロパティに引数 a を
//自分の y というプロパティに引数 b を設定してあげます。
//関数をオブジェクトとして扱い、それにプロパティを設定する感じ
this.x = a;
this.y = b;
}
となり、
共通のメソッド tashizan は
test.prototype.tashizan = function() {return this.x + this.y;}
と書きます。
これで、
var test = new test(1, 2);
var test2 = new test(3, 4);
document.write(test.tashizan());
document.write(test2.tashizan());
とするみたいな。
ちょっと説明がしょーもないですね・・・・・・。
『次は、YUIなどで使われている「名前空間」
初めてYUI使ったとき、ま~ったくわからなかったです・・・・。』
とか書いて意気込んで、大事な箇所を書いていたのですが、
javascriptのオブジェクト指向を上手にできるように説明できるようにするため、何回かこのテーマで記事書きたいとおもいます・・・。
お粗末様でございました。
- Newer: できるだけMooTools
- Older: javascript
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://javascript.tools-ranking.com/2008/07/javascript%e3%81%a7%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e6%8c%87%e5%90%91%e7%9a%84%e9%96%8b%e7%99%ba/trackback/
- Listed below are links to weblogs that reference
- javascriptでオブジェクト指向的開発 from javascliptの勉強