関数の呼び出しパターンとthisの振る舞い

前回に引き続きJavaScriptのお勉強。

JavaScriptでよく議論になっているっぽいthisだけど、JavaScript: The Good Partsによると関数の呼び出しパターンによって振る舞いが異なるらしい。

というわけで試してみる。

パターン1：関数呼び出しパターン

thisはグローバルオブジェクトを指す。

var quo1 = function() {
    return this; // グローバルオブジェクトを返す
};
var quo1_this = quo1_get_this();  

nodeで実行。

> console.log(quo1_this);

// nodeのグローバルオブジェクトが出力される

パターン2：メソッド呼び出しパターン

thisはそのオブジェクトを指す。

var quo2 = {
    status: 2,
    get_this: function() {
        return this; // そのオブジェクトを返す    
    }
};
var quo2_this = quo2.get_this();

nodeで実行。

> console.log(quo2_this);
{ status: 2, get_this: [Function] }
undefined

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

thisはnewで新規に作成されたオブジェクトを指す。

var Quo = function() {
    this.status = 3;
};
Quo.prototype.get_this = function() {
    return this; // newで作成されたオブジェクトを返す  
};
var quo3_this = (new Quo()).get_this();

nodeで実行。

> console.log(quo3_this);
{ status: 3 }
undefined

パターン4：apply呼び出しパターン

thisはapplyの引数で渡されたオブジェクトを指す。

var quo4 = {
    status: 4
};
// applyの引数に渡されたオブジェクトを返す               
var quo4_this = Quo.prototype.get_this.apply(quo4);

nodeで実行。

> console.log(quo4_this);
{ status: 4 }
undefined

まとめ

• thisに何が入るかは関数が実行されるまでは決まっていない
• thisは変数でもプロパティでもなく単なるキーワード