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

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

JavaScriptのthisキーワードは、そのキーワードが属しているオブジェクトを参照します。大きな特徴として、使用される文脈によって参照先が変化するという点があり、これがthisの挙動を理解するうえで重要なポイントとなります。

thisが参照するオブジェクトの一覧

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

サンプルコード

以下は、JavaScriptの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 inside normal function = " + test() + "<br>";
            sampleEle.innerHTML += "This inside a method = " + testObj.check() + "<br>";
            sampleEle.innerHTML += "This without any scope = " + thisRef + "<br>";
        },
        false
    );
</script>
</body>
</html>

実行結果

上記のコードを実行すると、最初に次のような画面が表示されます。

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

続いて、「CLICK HERE」ボタンをクリックすると、各文脈でのthisの参照先が出力されます。

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

まとめ

このように、thisの参照先は呼び出され方によって変わります。通常の関数内ではグローバルオブジェクト、メソッド内ではそのオブジェクト自身、イベントリスナー内ではイベントの発生元となるHTML要素を指すため、文脈を意識して使い分けることが重要です。なお、アロー関数の場合はthisが定義された場所の外側のスコープを引き継ぐという点にも注意しましょう。

  1. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for

  2. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照