JavaScriptのこのキーワード

JavaScript で最も混乱するキーワードの 1 つは、this キーワードです。これは、すべての関数のスコープ内で自動的に定義される特別な識別子キーワードですが、それが正確に何を指すのかは、経験豊富な JavaScript 開発者さえも混乱させます。

this キーワードは、関数本体などのコード部分が実行されるコンテキストを指します。最も一般的には、オブジェクト メソッドで使用されます。このメソッドは、メソッドがアタッチされているオブジェクトを参照するため、同じメソッドを異なるオブジェクトで再利用できます。

this の値は、関数が宣言された場所ではなく、関数が実行される場所で識別できます

JavaScript で this を識別するためのさまざまなルールを調べます

デフォルトのバインディング

関数呼び出しの最も一般的なケースに適用するデフォルトのルールは、スタンドアロン関数の実行です。このルールは、他のルールが適用されない場合のデフォルトのキャッチオール ルールと考えてください。

スタンドアロン関数呼び出しでは、この値は globalObject になります (ブラウザ環境ではウィンドウ オブジェクト、ノード環境ではグローバルになります)

function bar() {
    console.log(this) // this will be global object (window)
}
bar()

でも……

この値は、コードが厳密モードまたは非厳密モードで実行される方法によって異なる場合があります

関数がスタンドアロン関数として呼び出された場合、これは通常、非厳密モードではグローバル オブジェクトを参照し、厳密モードでは未定義を参照します

"use strict"
function bar() {
    console.log(this) // undefined
}
bar()

微妙ですが重要なことですが、グローバル オブジェクトは、bar() の内容が厳密モードで実行されていない場合にのみデフォルト バインディングの対象となります。

function bar() {
    console.log(this) // global object (window)
}
(function() {
    "use strict"
    bar()
})()

暗黙的なバインディング

通常の関数がオブジェクトのメソッド (obj.method()) として呼び出される場合、これはそのオブジェクトを指します。

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    foo
}
obj.foo() // this here is object owing the function

まず、bar() が宣言され、後で参照プロパティとして obj に追加される方法に注目してください。 foo() が最初に obj で宣言されるか、(このスニペットが示すように) 後で参照として追加されるかに関係なく、どちらの場合も、関数は実際には obj オブジェクトによって「所有」または「包含」されません。

暗黙的な損失:
コールバックを使用すると、暗黙的にバインドされた関数はそのバインディングを失います。これは通常、厳密モードに応じて、グローバル オブジェクトまたは未定義のデフォルト バインディングにフォールバックすることを意味します。

function bar() {
    setTimeout(function() {
        console.log(this) // this will be global object
    }, 1000);
}
const obj = {
    name: "javascript",
    bar
}
obj.bar() // this will be global object

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    bar
}
const a = obj.bar
a() // this will be global object

明示的なバインディング

先ほど見たような暗黙的バインディングでは、問題のオブジェクトを変更して関数への参照を含める必要があり、このプロパティ関数参照を使用してこれを間接的 (暗黙的) にオブジェクトにバインドする必要がありました。

しかし、オブジェクトにプロパティ関数参照を置かずに、関数呼び出しで this バインディングに特定のオブジェクトを使用するように強制したい場合はどうすればよいでしょうか?

はい、可能です。JavaScript には .map や .filter など、配列用のメソッドが多数用意されていますが、機能するメソッドはほとんどありません。これらは apply 、 call 、および binding です

これらのメソッドの構文は次のとおりです
電話

function bar() {
    console.log(this) // this will be global object (window)
}
bar()

適用

"use strict"
function bar() {
    console.log(this) // undefined
}
bar()

申請と呼び出しでは微妙に異なります。構文は同じですが、apply メソッド
で引数を配列として渡します。

function bar() {
    console.log(this) // global object (window)
}
(function() {
    "use strict"
    bar()
})()

bar.call(..) による明示的なバインディングを使用して bar を呼び出すと、this を強制的に obj にすることができます。

新しいバインディング

関数が (new キーワードを使用して) コンストラクターとして使用される場合、コンストラクター関数がどのオブジェクトでアクセスされるかに関係なく、this は構築される新しいオブジェクトにバインドされます。コンストラクターが別の非プリミティブ値を返さない限り、this の値は新しい式の値になります。

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    foo
}
obj.foo() // this here is object owing the function

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