ホームページ  >  記事  >  ウェブフロントエンド  >  「this」は JavaScript コールバック関数でどのように動作しますか?

「this」は JavaScript コールバック関数でどのように動作しますか?

DDD
DDDオリジナル
2024-11-03 22:34:03802ブラウズ

How does 'this' behave in JavaScript Callback Functions?

JavaScript コールバック関数の 'this' を理解する

JavaScript では、関数内の 'this' の値は関数がどのように決定されるかによって決まります。が呼び出されます。関数が引数として別の関数に渡される場合、コールバック関数内の「this」の値は、さまざまなメソッドを使用して制御できます。

デフォルトの動作

一般、コールバック関数では、「this」はデフォルトでグローバル オブジェクトまたは未定義 (厳密モード) に設定されます。これは、コールバック関数が技術的には特定のオブジェクトのメソッドとして呼び出されないためです。

.bind() で 'this' を設定

ただし、.bind () メソッドを使用すると、コールバック関数の呼び出し時に特定の値を「this」にバインドできます。 .bind() メソッドは、常に 'this' を .bind() の引数として渡される値に設定する新しい関数を作成します。

例: .bind() の使用

あなたの例では:

randomFunction(this.sumData.bind(this))

.bind() メソッドは、「this」を obj オブジェクトにバインドする新しい関数を作成するために使用されます。したがって、コールバック関数 (this.sumData) がrandomFunction によって呼び出されると、「this」は予想どおり obj に設定されます。

直接メソッド呼び出しとの比較

対照的に、randomFunction 内で this.sumData() の直接メソッド呼び出しを使用すると、関数は obj オブジェクトのメソッドとしてではなく通常の関数として呼び出されるため、'this' がグローバル オブジェクトまたは未定義に設定されます。

ES6 のアロー関数

ES6 では、アロー関数は「this」に関して異なる動作をします。これらは、定義されている環境からの「this」の語彙値を維持します。これは、アロー関数の呼び出し方法に関係なく、「this」は常に同じオブジェクトを参照することを意味します。これは特定のシナリオでは役立ちますが、この動作に注意することが重要です。

結論

最終的に、コールバック関数内の 'this' の値は次のとおりです。関数の呼び出し方法によって決まります。 「this」を制御するさまざまな方法を理解することで、JavaScript コールバックでデータを効果的に渡したり操作したりできます。

以上が「this」は JavaScript コールバック関数でどのように動作しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。