JavaScript の「this」キーワードとは一体何ですか？

重要な洞察:

• グローバル スコープ: グローバル コンテキストでは、これはグローバル オブジェクト (ウィンドウなど) を指します。

• 関数コンテキスト: 通常の関数内では、これは厳密モードと非厳密モードで異なる動作をし、未定義またはグローバル オブジェクトを返します。

• メソッド: オブジェクト メソッドでは、これはオブジェクト自体を参照し、そのプロパティへのアクセスを許可します。

• Call、Apply、Bind: これらのメソッドでは、this コンテキストを変更することでオブジェクト間で関数を共有できます。

• アロー関数: アロー関数は独自の this を持たず、それを囲んでいる字句コンテキストから継承します。

• DOM 要素: DOM イベント ハンドラーでは、イベントをトリガーした HTML 要素を指します。

グローバルな範囲

まず、「this」がグローバル スコープでどのように動作するかを調べてみましょう。 JavaScript では、コードの最上位で「this」を参照すると、グローバル オブジェクトを参照します。 Web ブラウザでは、このグローバル オブジェクトは ウィンドウ です。

例:

    console.log(this); // Outputs: Window

ただし、Node.js では、グローバル オブジェクトは異なり、グローバル と呼ばれます。

したがって、「this」の値は、JavaScript コードが実行されている環境によって異なります。

関数内の「これ」を理解する

次に、「this」が関数内でどのように動作するかを調べてみましょう。関数を定義して呼び出すと、その関数内の "this" の値は、関数の呼び出し方法によって異なります。

非厳密モードでは、関数内で "this" をログに記録すると、グローバル オブジェクトも参照します:

    function test() {
        console.log(this);
    }
    test(); // Outputs: Window

ただし、「use strict」を追加して strict モードを有効にすると、関数の先頭では、「this」は 未定義:
になります。

    'use strict';
    function test() {
        console.log(this);
    }
    test(); // Outputs: undefined

この動作は、この置換の結果であり、「this」が null または非厳密モードで未定義の場合、デフォルトでグローバル オブジェクトになることを示しています。

厳密モードと非厳密モード

厳密モードと非厳密モードの違いを理解することが重要です。非厳密モードでは、「this」の値はグローバル オブジェクトにすることができますが、厳密モードでは、オブジェクトに明示的にバインドされていない場合、値は未定義になります。

要約:

• グローバル空間では、「this」はグローバル オブジェクトを指します。
• 関数内で、「this」は非厳密モードではグローバル オブジェクトを参照できますが、厳密モードでは未定義です。

オブジェクトメソッドでの「this」の仕組み

ここで、「this」がオブジェクト メソッド内でどのように動作するかについて説明します。関数がオブジェクト内で定義されている場合、それはメソッドとみなされ、メソッドが呼び出されるときに「this」はそのオブジェクトを参照します。

    console.log(this); // Outputs: Window

ここで、「this」は、メソッドが定義されているオブジェクトである「obj」を指します。

Call、Apply、Bind によるメソッドの共有

オブジェクト間でメソッドを共有するために、JavaScript は call、apply、および bind の 3 つの関数を提供します。これらのそれぞれを使用すると、「this」の値を明示的に設定できます。

• call: 指定された this 値と引数を使用して関数を呼び出します。
• apply: call と似ていますが、引数の配列を受け入れます。
• bind: 指定された this 値を持つ新しい関数を返します。

例:

    function test() {
        console.log(this);
    }
    test(); // Outputs: Window

この場合、printName 内の「this」はstudent1 ではなくstudent2 を指します。

アロー関数と「this」

アロー関数は従来の関数とは動作が異なります。彼らは独自の「これ」コンテキストを持っていません。代わりに、それを囲む語彙コンテキストから "this" を継承します。これは、アロー関数内の「this」が関数の外で参照するのと同じ値を参照することを意味します:

    'use strict';
    function test() {
        console.log(this);
    }
    test(); // Outputs: undefined

ここで、アロー関数の「this」は「obj」オブジェクトを指し、アロー関数がどのように周囲のコンテキストから「this」値を取得するかを示しています。

DOM 内の「これ」

最後に、DOM を操作する場合、「this」はイベントをトリガーした HTML 要素を参照できます。例:

    const obj = {
        name: 'My Object',
        getName: function() {
            console.log(this.name);
        }
    };
    obj.getName(); // Outputs: My Object

この場合、ボタンがクリックされると、「this」はボタン要素自体を指します。

読んでいただきありがとうございます。このガイドが役に立ったと思われた場合は、他の開発者と共有して、JavaScript の「これ」についての理解をさらに強化するために練習を続けてください。

以上がJavaScript の「this」キーワードとは一体何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。