[今日のミス] this キーワードの表すもの

今日やってしまったミスをメモしておきます orz

例えば、次のようなオブジェクトを定義したとします。

function MyObject() {
    this.a = 100;
}

MyObject.prototype = {
    call : function() {
        alert(this.a);
    }
}

このコードでは、メソッドとして call 関数（引数なし）をもつ MyObject を定義しています。

そして、次のコードを実行すると、「100」と書かれたダイアログが表示されます。

var myObject = new MyObject();

myObject.call();

これは、call 関数の中の「this」キーワードが、生成された MyObject を表しているためです。

ここで、次のような関数を用意します。この関数は、他の関数（Function オブジェクト）を受け取って呼び出す関数です。

function callFunction(callback) {
    callback();
}

次のコードを実行すれば、myObject の call 関数が呼び出されるはずです。

var myObject = new MyObject();

callFunction(myObject.call);

しかし、表示されるダイアログには「undefined」と出てしまいます。つまり、call 関数の中にある「this.a」が定義されていないということになります。

実際には、JavaScript の「this」は、呼び出し元を表します。つまり、「myObject.call()」で call 関数を呼び出した場合には、myObject 経由で call 関数が呼び出されるので「this」は myObject を指します。しかし、「callFunction(myObject.call)」（実際の呼び出しは「callback()」）では、myObject を経由せずに直接 call 関数が呼び出されるので、「this」は myObject を指しません（Firefox での実行では、Window オブジェクトを指しました）。そのため、「undefined」となったわけです。

ついつい Java と同じつもりでコードを書いていて、見事に失敗してしまいました orz

（；^ω^）まあ、言語の使い初めにはよくあることですね。