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

白石俊平
2008/04/09 19:00

JavaScriptで「自分自身」にアクセスするthisキーワードについてきちんと理解していますか？ 今回はthisキーワードに関してです。

イベントハンドラ中のthisは混乱のもと

　前のページで述べたことは、実際それほど難しいことではありません。ですが、プログラムの書き方によっては（特にオブジェクト指向的なコードを書いているとき）、thisが何を指すのか混乱してしまい、バグの元になることもあります。

　以下のコードを見てください。画面にボタンを一つだけ配置し、押されると「こんにちは！白石」と表示するのが目的のプログラムです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">

var shiraishi = {
  name: "白石",
  // initメソッドは、body.onloadから呼ばれる
  init: function() {
    var button = document.getElementById("button");
    // ボタンのイベントハンドラに、メソッドhelloをセット
    button.onclick = this.hello;
  },
  hello: function() {
    alert("こんにちは！" + this.name);
  }
};
</script>
</head>
<body onload="shiraishi.init()">
  <button id="button" name="ボタン">クリック!</button>
</body>
</html>

　ですが、このプログラムを実行した結果は「こんにちは！白石」ではなく、以下のようになりました。

実行結果

　なぜこうなったかお分かりですか？（ヒント：buttonタグのname属性）

記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 今日のトップ記事
  • 昨日
  • 2日前
  • 3日前
  • 6日前
  • 7日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Internet Explorer PHP Webアプリケーション開発 Database CSS 3 iPhone 3G Tips HTML 仮想化 Eclipse CSS Microsoft ライブラリ Adobe Flash Mozilla 入門 ブラウザ Leopard Webデザイン イロハ 開発環境 Opera Mac OS X オープンソース Python Java Solaris RIA Google SOA iPod touch Safari リファレンス iPhone Apache C/C++ フレームワーク Linux Firefox 3 Ruby server Off Topic Ajax 小技 JavaScript Apple XHTML Firefox Windows
  • 話題のタグを見る »