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

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

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

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

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

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

「（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が指すオブジェクトも全く異なってくることを覚えておいてください。