JavaScript の this キーワードは、理解しないと非常に難しくなります。これは、経験豊富な開発者でも簡単に理解するのが難しいものの 1 つですが、一度理解すれば、大幅に時間を節約できます。

この記事では、これが何であるか、さまざまな状況でどのように機能するか、および使用時に陥ってはいけないよくある間違いについて説明します。

JavaScript でこれを理解する

これは、JavaScript コードで現在使用されているオブジェクトを単に指します。ただし、ここが難しい部分です。これが何を指すかは、コード内のどこでどのように使用するかによっても変わる可能性があります。 「それはなぜですか?」と尋ねる人もいるかもしれません。これは本質的に動的です =、つまり - その値は、関数が書かれたときではなく、関数が呼び出されたときに決定されます。

これはグローバルおよび関数コンテキストで

これをグローバル コンテキストで使用する場合、多くの場合グローバル オブジェクトを指しますが、これは非常に理にかなっていますね。したがって、ブラウザのコンソールにこれを入力すると、ウィンドウがポイントされます。

関数内で使用すると、動作がまったく異なります。例: たとえば、関数「myFunction」を呼び出した場合、これは引き続きグローバル オブジェクトを指しますが、JavaScript で厳密モードを使用すると、その関数内でオブジェクトが未定義になります。

はい、かなりわかりにくいと思いますが、説明に従ってください。もっと詳しく説明します。

これはオブジェクト内にあります

これをメソッド (オブジェクトのプロパティである関数) 内で使用する場合、これはメソッドが属するオブジェクトを参照します。

例：

const myObject = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};

myObject.greet(); // Output: 'Alice'

ここで、this.name は myObject.name、つまり「Alice」を指します。

これはコンストラクターとクラスで

コンストラクター: コンストラクター関数またはクラスを使用してオブジェクトを作成する場合、これは作成される新しいオブジェクトを指します。

例：

function Person(name) {
    this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // Output: 'Bob'

コード内では、 this.name は新しい Person オブジェクトの name プロパティを参照します。

よくある間違いとその回避方法

これに関するよくある間違いの 1 つは、コールバックまたはイベント ハンドラーで正しい値が失われることです。たとえば、オブジェクトからメソッドをコールバックとして渡す場合、これはオブジェクトを参照しなくなる可能性があります。

解決策: これを回避するには、アロー関数またはバインドを使用して、これが正しいオブジェクトを指すようにします。

const myObject = {
    name: 'Eve',
    greet: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

myObject.greet(); // Output: 'Eve'

結論

this キーワードは面倒かもしれませんが、注意しなければならないのは、呼び出す方法と場所によって変わるということだけです。上達するには、たくさんの例を使って練習すれば、時間をかけずにプロになれるでしょう。