thisの挙動

javascriptのthisの挙動について勘違いしてた!ということでサンプル。

var f = function sayMyName() {
  alert(this.myName);
}
f.myName = 'hoge';
f();

これ普通にhogeって表示されるんだと思ってた。そしたら結果はundefinedでした。理由としては、thisは呼び出し元を指しているから。自分自身なんかと思ってたわ。
なんか言い回しが微妙。というか勘違いしてました。このfという関数はグローバル関数なので、この場合誰のものかといえば、windowになります。で、windowオブジェクトにはmyNameなんてプロパティはないのでundefinedというわけです。ただそれだけですね(汗)。
次のコードならOK。

var human = {
  myName : 'fuga',
  sayMyName : f
}
human.sayMyName(); // fugaと表示

この場合呼び出し元はhuman。これも正確には、fはhumanオブジェクトが保持することになったからですね。myNameがきちんと登録されているので、fugaと表示される。


じゃ、最初の例の場合、呼び出し元って誰よ?誰の所有?という話になるんだけど、これはグローバルな関数として登録されているので、誰の所有物かというと「window」です。以下のコードで確認できます。

window.myName = 'window!';
f(); // window!と表示

ほぇー。ミスしそう。