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

白石俊平(あゆた)
2008-04-09 19:00:00
  • このエントリーをはてなブックマークに追加

前回までのおさらいと今回のあらすじ

 前回までの記事で、JavaScriptでオブジェクト指向を行うにあたって必要な知識を一通り網羅しました。その中で、オブジェクトに属する関数=メソッドについても触れました。

 今回は、オブジェクトやメソッドと深い関わりのあるキーワード、「this」について解説したいと思います。

thisキーワードについてきっちり理解する

 「thisキーワードについてお話しする」と言いましたが、実はthisキーワードは連載中で既に触れています。連載第9回で、このように述べています。

「(thisキーワードは)実行中のコードが「自分自身」を表すオブジェクトにアクセスするためのキーワードです。」

 「実行中のコード」とされているのは、関数(メソッド)などの実行可能なコードということです。つまり、thisキーワードはメソッドをメンバに含むオブジェクトを指す、と言って良いでしょう。

 例えば、以下のようなオブジェクトがあったとします。

var shiraishi = {
  name: "白石",
  hello: function() {
    alert("こんにちは!" + this.name);
  }
};

 このhello()メソッドを呼び出すと、「こんにちは!白石」と表示されます。何の不思議もありませんね。thisキーワードを使用しているのはhello()メソッドであり、同メソッドが所属しているのはオブジェクトshiraishiなのですから。

 ですが、JavaScriptは非常に動的な言語なので、あるオブジェクトのメソッドを他のオブジェクトにコピーすることもできます。

var tanaka = {
  name: "田中"
};
// shiraishi.helloをtanaka.helloにコピー
tanaka.hello = shiraishi.hello;

tanaka.hello(); // 何が表示される?

 さあ、最後の「tanaka.hello()」の呼び出しでは何が表示されるでしょうか。

 答えはお分かりですね? そう、「こんにちは!田中」です。

 hello()関数の中ではthis.nameを参照しています。そして、thisが指すものは、「メソッドをメンバに含むオブジェクト」です。つまり、「tanaka.hello()」の呼び出し中、メソッド内のthisオブジェクトは変数tanakaを指しているのです。

 このように、JavaScriptにおけるメソッドとは、特定のオブジェクトと密に結びついているものではありません。そのため、プログラムの文脈によっては、thisが指すオブジェクトも全く異なってくることを覚えておいてください。

  • コメント(2件)
#1 tokumei   2012-01-09 15:12:40
>普通の関数中でthisを使うとどうなる?
> 最後に、thisに関してもう一つだけ簡単な実験をしておきましょう。
> 以下のコードを見てください。

のコードがエスケープされていません。
そのまま実行されているために、アクセスした瞬間にアラートが発生します。
#2 builder編集部   2012-01-10 13:31:32
tokumei様

builder編集部です。ご指摘、ありがとうございました。
本記事の2ページ目と3ページ目を修正いたしました。

この度はご迷惑をおかけしまして、誠に申し訳ございませんでした。
今後もご愛読頂ければ幸いです。よろしくお願いいたします。
  • 新着記事
  • 特集
  • ブログ