this が議論するとき: コールバック関数の 'this' を理解する

JavaScript では、関数呼び出し内の this の値は、関数が実行されるコンテキスト。ただし、これを引数として渡す場合、ルールが複雑になる可能性があります。

具体的には、次のシナリオが発生します。コールバック関数が引数として渡されるとき、なぜこれが呼び出し元の関数に設定されないのかコールバック?

「this」の階層を理解する

なぜこれがどこに設定されているかを理解するには、次のことを行う必要があります。関数呼び出しの階層を考慮してください:

• obj.prepareRandomFunction() は、これを obj に設定します (答えのルール #2)。
• randomFunction(this.sumData.bind(this) ) は this.sumData.bind(this) を引数として渡します (ルール #1)。
• randomFunction 内で、callback(data) はこれを次のように設定します。グローバル オブジェクト (ルール #1)。

ただし、randomFunction はコールバックを呼び出す前に、this.sumData.bind(this) を使用して新しい関数を作成します (ルール #5)。この新しい関数は元のコールバック関数を呼び出しますが、これは obj (バインドに渡される引数) にバインドされています。

コールバック関数の影響

メソッドを渡すときコールバックとしては、obj.method() として呼び出されないことを理解することが重要です。これは、コールバック関数内に正しい値が存在しないことを意味します。この問題を回避するには、bind() を使用してコールバック内で this の値を設定します。

その他の役立つメモ

• ルール #6答えは、ES6 アロー関数がコールバック関数内であっても this の現在の字句値をどのように維持するかを説明しています。
• .apply() と .call() は次の目的で使用できます。 this の特定の値を使用して新しい関数呼び出しを作成します。
• bind() を使用して、this のカスタム値を使用して元の関数を呼び出す新しい関数を作成できます。
• this の複雑な性質を理解する効果的な JavaScript コーディングとコールバックなどの概念を習得するために不可欠です。