JavaScriptのthisキーワードをちゃんと理解する

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

前ページの解説

　前ページのプログラムが正しく動作しなかった理由は、実は最初にお見せした例と全く変わりません（だから、前ページのバグをすぐに見つけられた方もいらっしゃるでしょう）。

　問題は、shiraishi.init()内で行っているこの処理ですね。

button.onclick = this.hello;

　この状態でボタンをクリックされると、onclickイベントハンドラ＝hello()メソッドが実行されます。その際、hello()の中で用いている"this"はshiraishiオブジェクトではなく、ボタンのDOMオブジェクトになってしまいます。だから、this.nameが「buttonタグのname属性」を指してしまっていると言うわけです。

普通の関数中でthisを使うとどうなる？

　最後に、thisに関してもう一つだけ簡単な実験をしておきましょう。

　以下のコードを見てください。

<script type="text/javascript">
// トップレベルのコード中でthisを使用する
alert(this);
function init() {
  // トップレベルに定義された関数内でthisを使用する
  alert(this);
}
</script>

　このコードで使われている二つのalert()は、どちらも[object Window]と表示されます。つまり、ブラウザのwindowオブジェクトですね。

　この事実を正確に文章で表すなら、「トップレベルのプログラムコード/関数内でthisを利用すると、『グローバルオブジェクト』を指す」と言うことになります。

　グローバルオブジェクトと言うのは、簡単に言うと「グローバルな変数/関数の置き場所となるオブジェクト」です。ブラウザ上のJavaScriptにおいてはwindowオブジェクトになりますし、その他の実行環境では違うものになることがあります。

まとめと次回予告

　今回は、「this」キーワードについて掘り下げた解説を行いました。オブジェクト指向的なJavaScriptプログラミングを行う際には、今回お見せしたように、thisが指す対象を間違ってしまうことが多いので注意してください。

　次回は、今回の知識を踏まえた上で、JavaScriptの関数に関連する事柄（call()/apply()、argumentsオブジェクトなど）を網羅したいと思います。