JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの「this」キーワード徹底解説！文脈別の挙動を実例付きで解説

JavaScriptのthisキーワードとは？

JavaScriptにおけるthisキーワードは、その時々の実行コンテキストにおいて「自分が属しているオブジェクト」を参照する特別な識別子です。参照先は固定ではなく、どこで・どのように使われたかによって変化する点が重要です。

  • 単独または通常の関数内で使用した場合：グローバルオブジェクト（ブラウザ環境ではwindowオブジェクト）を参照します。
  • メソッド内で使用した場合：そのメソッドを所有するオブジェクトを参照します。
  • イベントリスナー内で使用した場合：イベントを受け取ったHTML要素を参照します。

以下に、さまざまなコンテキストでのthisの挙動を確認できるサンプルコードを示します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>JavaScript this Identifier</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、複数のコンテキストにおける'this'の参照先を確認できます
</h3>
<script>
   let thisRef = this;
   let sampleEle = document.querySelector(".sample");
   function test() {
      return this;
   }
   let testObj = {
      a: 22,
      check() {
         return this;
      },
   };
   document.querySelector(".Btn").addEventListener(
      "click",
      () => {
         sampleEle.innerHTML ="通常の関数内のthis = " + test() + "<br>";
         sampleEle.innerHTML +="メソッド内のthis = " + testObj.check() + "<br>";
         sampleEle.innerHTML += "スコープ外のthis = " + thisRef + "<br>";
      },
      false
   );
</script>
</body>
</html>

実行結果

ページを表示すると、次のような画面になります。

JavaScriptの「this」キーワード徹底解説！文脈別の挙動を実例付きで解説

「CLICK HERE」ボタンをクリックすると、各コンテキストにおけるthisの参照先が画面に出力されます。

JavaScriptの「this」キーワード徹底解説！文脈別の挙動を実例付きで解説

コードのポイント解説

  • let thisRef = this; — スクリプトのトップレベルでthisを取得しています。ここではグローバルオブジェクトが代入されます。
  • function test() — 通常の関数として呼び出された場合、非厳格モードではthisはグローバルオブジェクトを返します。
  • testObj.check() — オブジェクトのメソッドとして呼び出されているため、thisはtestObj自身を参照します。
  • アロー関数内のthis — アロー関数には独自のthisがなく、定義された場所のスコープからthisを引き継ぐという特徴があります。

このようにthisの挙動を理解することは、JavaScriptのコード設計やバグ修正において非常に重要です。特にイベントハンドラやコールバック関数の中では、呼び出し方によってthisの参照先が変わるため注意が必要です。


  1. JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説

    JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS

  2. JavaScriptのthisキーワードとは？参照先のオブジェクトをわかりやすく解説

    JavaScriptのthisキーワードは、そのキーワードが属しているオブジェクトを参照します。大きな特徴として、使用される文脈によって参照先が変化するという点があり、これがthisの挙動を理解するうえで重要なポイントとなります。 thisが参照するオブジェクトの一覧 単独で使用した場合、または通常の関数内： グローバルオブジェクト（ブラウザ環境では window オブジェクト）を参照します。 オブジェクトのメソッド内： そのメソッドを所有するオブジェクト自身を参照します。 イベントリスナー内： イベントを受け取ったHTML要素を参照します。 サンプルコード 以下は、JavaScriptの