JavaScriptの「this」キーワードとは？仕組みと使い方を実例で解説

JavaScriptにおける「this」キーワードは、現在実行中のコードが属するオブジェクト（主体）を参照するための特別なキーワードです。つまり、「this」はそのコードがどのオブジェクトの文脈で実行されているかを示す参照として機能します。

「this」の値は固定ではなく、関数がどのように呼び出されたか（実行コンテキスト）によって変化する点が重要です。最も一般的なケースでは、オブジェクトのメソッド内で使用された場合、「this」はそのメソッドを所有するオブジェクト自身を指します。

基本例：オブジェクトのメソッド内での「this」

以下の例では、オブジェクト「college」のメソッド「details」の中で「this.subject」を使用しています。

<script>
    var college = {
        subject: "Maths",
        lecturer: "Amy",
        details: function () {
            document.write(this.subject);
        }
    }
</script>

このコードの解説

この例では、オブジェクト「college」は次のプロパティとメソッドを持っています。

• subject：科目名（"Maths"）を格納するプロパティ
• lecturer：講師名（"Amy"）を格納するプロパティ
• details：「this.subject」を出力するメソッド

メソッド「details」内の「this」は、そのメソッドが属しているオブジェクト、すなわち「college」を参照します。したがって、「this.subject」は「college.subject」と同じ意味になり、college.details() を呼び出すと "Maths" が出力されます。

「this」の挙動のポイント

• オブジェクトのメソッドとして呼び出された場合：「this」はそのオブジェクトを指します。
• 単独の関数として呼び出された場合：非厳格モードではグローバルオブジェクト（ブラウザでは window）を指します。
• 厳格モード（"use strict"）では：単独呼び出し時の「this」は undefined になります。

このように「this」は呼び出し方によって参照先が変わるため、JavaScriptを扱う上で非常に重要な概念です。まずは「メソッド内では自分の所属するオブジェクトを指す」という基本をしっかり押さえておきましょう。