JavaScript の &#this&# キーワードをマスターする-jsチュートリアル-php.cn

JavaScript の &#this&# キーワードをマスターする

PHPz

リリース： 2024-08-21 12:34:02

オリジナル

323 人が閲覧しました

Mastering the

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'

ログイン後にコピー