矢印関数は ES6 の新機能です。独自の this はありません。その this ポイントは外部のコード ベースから継承されます。 矢印関数を使用する際には、いくつか留意すべき点があります。
PS: 実際の開発環境では、React は矢印関数を使用して古典的な問題を解決できますが、ここでは詳しく説明しません。 矢印関数の動作を例で見てみましょう。 定数オブジェクト = { fun1: 関数() { console.log(これを); 戻り値 () => { console.log(これを); } }, fun2: 関数() { 関数を返す(){ console.log(これを); 戻り値 () => { console.log(これを); } } }, 楽しい3: () => { console.log(これを); } } f1 = obj.fun1(); // オブジェクト f1() // オブジェクト f2 = obj.fun2() とします。 let f2_2 = f2(); // ウィンドウ f2_2() // ウィンドウ obj.fun3(); // ウィンドウ 出力の各行の分析: これは明らかに暗黙のバインディングであり、fun1のthisはobjを指しています。 前の行で返された矢印関数がここで実行されます。前のコードベースのthisがobjを指していることを解析すると、直接継承され、矢印関数thisが指している
fun2 が最初のレベルで実行されると、コードは出力されません。代わりに、関数が返され、f2 に割り当てられます。ここでバインディングの損失が発生し、this は元の obj ではなく window を指します (割り当てが発生)。 f2()が実行され、リバウンドthis——windowが出力され、矢印関数が返されてf2_2fに割り当てられます。 実行してwindowを出力します。外側のコードのthisはwindowを指していませんか?ここではwindowを継承してthisとします。 リテラル内で直接定義された矢印関数はオブジェクトの this を継承できませんが、1 層外側を見て window を見つけます。これは、リテラル オブジェクトは独自のスコープを形成できないのに対し、コンストラクターは形成できるためです。 では、矢印関数の this ポインターをどのように操作するのでしょうか? 答えは、外側のコード ベースの this ポインターを変更し、矢印関数を定義する前に this の方向を変更することです。 上記のコードに基づいて: fun4 = f2.bind(obj)() // オブジェクト fun4() // オブジェクト 第 2 レベル メソッドの this ポインターが変更され、矢印関数も継承されていることがわかりました。 fun2: 関数() { return function () { // ここでこれを変更します console.log(これを); return () => { // ここで定義すると継承されます console.log(this); } } }, 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: CSS3 は下部に固定されたフッターを実装します (ページの高さに関係なく常に下部にあります)
すべてがファイルです! UNIX はすでにそれを言っています。エリック・レイモンドはこう言いました。...
1. DockerはローカルディレクトリをマウントしますDocker は、ホスト上のディレクトリをイ...
MySQLインストールチュートリアル、参考までに具体的な内容は次のとおりです。 1. ダウンロードY...
div または span に同時に CSS を適用する必要があります。コードをコピーコードは次のとお...
この記事では、9グリッドクリックの色変更効果を実現するためのJavaScriptの具体的なコードを参...
ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...
この記事では、WeChatアプレットのカスタムタブバーコンポーネントの具体的なコードを参考までに紹介...
この例では、デバッグ用の MySQL データベースをダウンロードしてインストールする必要があります。...
約 1 年前、私は「虫眼鏡効果を模倣するいくつかの方法の原理の分析」という記事を書きました。当時、自...
Web デザインでよく耳にするプロパティ名: content、padding、border、marg...
目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...
どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...
序文現在、私の会社で使用しているオペレーティングシステムはすべて CentOS7.4 で、アプリケー...
関連記事:初心者が学ぶ HTML タグ (5)導入された HTML タグは、必ずしも XHTML 仕...
目次インデックスの適切な使用1. 通常のインデックスのデメリット2. 主キーインデックスの落とし穴3...