World Wide Windblue: JavaScriptの関数の呼び出しについて

2009年11月15日日曜日

JavaScriptの関数の呼び出しについて

JavaScriptにて関数を呼び出す方法は4つ。

メソッド呼び出しパターン
関数呼び出しパターン
コンストラクタ呼び出しパターン
apply呼び出しパターン

1.メソッド呼び出しパターン

関数がオブジェクトのプロパティとして格納されている場合には、メソッドと呼ばれる。

myObject.method();

上記のようにメソッドが呼び出された場合、thisにはそのオブジェクトが格納される。
thisを使って自分自身のオブジェクトコンテキストにアクセスしているメソッドは、
パブリックメソッドと呼ばれる。

2.関数呼び出しパターン

var hoge = func(1);

このパターンで呼び出された関数では、thisにはグローバルオブジェクトがセットされる。
内部関数内でのthisと呼び出し元の外部関数でのthisと同じものを指し示すようにするには以下のようにする。

var myObj = {
    valut:0;
};

myObj.half = function(){
    var that = this;        //thisにはmyObjが格納される。
    var calc = function(){
        that.value = that.value / 2;
        //ここで「this」を使用すると、 calc();が関数呼び出しパターンなので、
        //グローバルオブジェクトがセットされてしまう
    };
    calc();
}
myObj.half();

3.コンストラクタ呼び出しパターン

関数を呼び出す歳に、new演算子が前に付けれていた場合、
新しいオブジェクトが生成されて、thisにはその新しいオブジェクトがセットされる。
そのオブジェクトは、呼び出された関数のprototypeプパティへの隠されたリンクを持っている。
new演算子を付けて呼び出すことを前提とした関数は、コンストラクタと呼ばれる。

var Obj = function(string){
 this.status = string;
}

Obj.prototype.get_status = function(){
    return this.status;
};

var myObj1 = new Obj("myObj1");
alert(myObj1.get_status());        //「myObj1」

var myObj2 = new Obj("myObj2");
alert(myObj2.get_status());        //「myObj2」

var myObj3 = myObj1;               //オブジェクトはコピーではなく、参照渡し
alert(myObj3.get_status());        //「myObj1」

myObj3.status = "myObj3";
alert(myObj3.get_status());        //「myObj3」

alert(myObj1.get_status());        //「myObj3」

4.apply呼び出しパターン

applyメソッドを使うことで、引数を格納した配列を使って関数を呼び出すことができるし、
thisにセットされる値を自由に設定することが可能になる。
applyメソッドには2つのパラメータを指定することができ、
1つ目にはthisをセットしたい値、
2つ目はパラメータの配列である。

var statusObject = {
    status:'hogehoge',
}

var status = Obj.prototype.get_status.apply(statusObject);
//statusは「hogehoge」
//なぜなら、
//Obj.prototype.get_status = function(){
//    return this.status;
//};
//のthisに、statusObjectがセットされたので。
//statusObject.statusは'hogehoge'である。

参考文献など

参考書籍

World Wide Windblue