
JavaScriptのthisキーワードをちゃんと理解する
前回までのおさらいと今回のあらすじ
前回までの記事で、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件)
builder編集部です。ご指摘、ありがとうございました。
本記事の2ページ目と3ページ目を修正いたしました。
この度はご迷惑をおかけしまして、誠に申し訳ございませんでした。
今後もご愛読頂ければ幸いです。よろしくお願いいたします。
- 新着記事
- 特集
- ブログ
- 企画特集
-
いままさに社会にとっての転換点
-
データの散在と非常率運用がネック
-
明日からではもう遅い?!
-
セキュリティの今を知る
-
モバイルデバイスもターゲットに!
-
話題のセキュリティ事故体験ゲーム
-
ゼロトラストに不可欠なID管理
-
講演の見どころを紹介
-
企業DXのキモはクラウドにあり
-
連載!プロが語るストレージ戦略
-
保育業界のDX(前編)
-
さあ、クラウドで解決しよう。
-
いまさら聞けない「PPAP」
-
次の一手はこれだ!
-
保育業界のDX(後編)
-
特集:IT最適化への道
-
連載!プロが語るストレージ戦略
-
ビッグデータ最前線!
-
いまあるデータで身近な業務をDX
-
連載!プロが語るストレージ戦略
-
請求書がきてからでは遅い
-
内部不正や不注意をどう防ぐ?
-
デジタルを当たり前と言えるか?
-
IDaaSって何?
-
利便性とセキュリティの両立
> 最後に、thisに関してもう一つだけ簡単な実験をしておきましょう。
> 以下のコードを見てください。
のコードがエスケープされていません。
そのまま実行されているために、アクセスした瞬間にアラートが発生します。