ホームページ >ウェブフロントエンド >jsチュートリアル >なぜ `bind()` はアロー関数の `this` で動作しないのでしょうか?

なぜ `bind()` はアロー関数の `this` で動作しないのでしょうか?

Barbara Streisand
Barbara Streisandオリジナル
2024-12-13 17:07:09771ブラウズ

Why Doesn't `bind()` Work with Arrow Functions' `this`?

アロー関数の「this」バインディングの難問: 明らかにされる難題

アロー関数の魅力的なシンプルさにもかかわらず、' に関する不可解な動作これは多くの開発者を困惑させてきました。アロー関数内の特定のコンテキストに「this」をバインドできないことが、繰り返し発生するフラストレーションの原因となっています。

ジレンマを説明するには、次のコードを考えてみましょう。

const f = () => console.log(this);

const o = { a: 42 };

const fBound = f.bind(o);

fBound(); // Expected: { a: 42 }, Actual: { window: Window }

この例ではでは、「bind()」メソッドを使用して、アロー関数「f」の「this」コンテキストをオブジェクト「o」にバインドしようとします。ただし、'fBound()' を呼び出すと、不可解なことに、予期された 'o' オブジェクトではなく、グローバル 'window' オブジェクトがログに記録されます。

この複雑な動作は、アロー関数の固有の性質に根ざしています。独自の「this」コンテキストを持つ通常の関数とは異なり、アロー関数は周囲の字句スコープから「this」バインディングを継承します。この場合、'f' はグローバル スコープ内で定義され、グローバル 'window' オブジェクトにバインドされた 'this' をレンダリングします。

ECMAScript 2015 仕様には次のように明記されています。

ArrowFunction 内の引数、super、this、または new.target は、字句的に囲むバインディングに解決される必要があります。環境."

したがって、アロー関数内で 'this' を再バインドすることは不可能になります。 「this」は、アロー関数が定義されたコンテキストに永久に固定されたままになります。

コードにとって「this」を意味のある使用することが重要である場合、賢明な行動は、関数の代わりに通常の関数を使用することです。矢印機能。通常の関数を使用すると、「this」バインディングをより詳細に制御できるため、「bind()」または他のメソッドを使用して「this」を目的のコンテキストに明示的にバインドできます。

以上がなぜ `bind()` はアロー関数の `this` で動作しないのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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