サイテック株式会社 > 【連載】新人女子プログラマーの技術修行日記 - 第4回 Javascript編④ ―プロトタイプ― ,

第一回で関数について少し書きましたが、

function文で定義された関数名にnewという演算子を付けると、

オブジェクトが生成できます。

この関数のことをコンストラクタと言います。

通常コンストラクタの中では、オブジェクトの初期化を行います。

同じコンストラクタを用いて複数のオブジェクトを生成すると、

同じプロパティを持つオブジェクトを簡単に作成する事ができます。

この辺の定義や考え方は、他のオブジェクト指向言語とだいたい同じだと思います。


    function Test(){

        this.x = 1;
        this.y = 2;

    }

    var hoge = new Test();        //Testオブジェクトが生成されhogeに代入される
    alert(hoge.x);                // 表示：1

    var hoge2 = new Test();        //Testオブジェクトが生成されhoge2に代入される
    alert(hoge2.x);                // 表示：1


しかし、javascriptのと他の言語のオブジェクト指向には決定的な違いがあります。

Javascriptには何もないところからインスタンスを生成するというようなクラスという概念はありません。

以前書いたようにjavascirptのデータは全てオブジェクトです。

元からオブジェクトが存在するので、それをプロトタイプ（原型）として新しいオブジェクトを作っていく。

これがjavascritpにおけるオブジェクト指向の考え方らしいのですが、

んーいまいちよくわからないですねぇ。

そもそもプロトタイプってなんでしょう？？

    function Hoge() {}
    alert(Hoge.prototype);        //    表示：[object Object]

これもまた「オブジェクト」です。


すべてのオブジェクトにはprototypeプロパティが用意されていて、

これによってオブジェクトを拡張します。（クラスの継承ではなく）

たとえば、Stringオブジェクトにprototypeを使ってhogeメソッドを生成した場合、

全てのStringオブジェクトでhogeメソッドが使えるようになります。


    String.prototype.hoge = function(){
        alert ("Hello!" + this);
    }

    var strObj = new String("Javascript");
    strObj.hoge();   

    var strObj2 = new String("PHP");
    strObj2.hoge();     

つまり、いわゆるクラスレベルで定義するべきメソッドやプロパティはprototypeで定義します。


ここで一つ疑問が。

コンストラクタで定義されたプロパティと

プロトタイプで定義されたプロパティ。

一体何が違うのでしょう？

    var Test1 = function() {
       this.hoge = "aaa";

    };

    var obj = new Test1();

    alert(obj.hoge);     //     aaa

    delete obj.hoge;
    alert(obj.hoge);     //     undifined

    ----------------------------------

    var Test2 = function() {};

    Test2.prototype.hoge = "aaa";

    var obj = new Test2();

    alert(obj.hoge);     //     aaa

    delete obj.hoge;
    alert(obj.hoge);     //     aaa

なぜプロトタイプで定義されたほうは消えないのか？？

これを理解するにはプロトタイプチェーンというものを知らなければいけないよう。


また、オブジェクト指向における継承もプロトタイプを使えば実現できます。

    function Test(){
        this.x = 1;
        this.y = 2;
    }

    function Test2(){
        
    }

    Test2.prototype = new Test();        //Testオブジェクトを継承

    var hoge = new Test2();
    alert(hoge.x);            // 表示：1
    alert(hoge.y);            // 表示：2


では、オブジェクトはどのようにメソッドやプロパティを探しだしているのでしょうか？

javascriptがオブジェクトからオブジェクトを作り出して

プロトタイプを使ってクラスを継承しているということは、

階層構造のように成り立っているようですが、

そもそもこの階層の一番上ってどこなのでしょう？


ここでポイントになるのもまたプロトタイプチェーンです。

ここはいろいろ奥が深そうなので、次回まとめたいと思います。