JSの矢印関数におけるこのポイントの詳細な説明

JSの矢印関数におけるこのポイントの詳細な説明

矢印関数は ES6 の新機能です。独自の this はありません。その this ポイントは外部のコード ベースから継承されます。

矢印関数を使用する際には、いくつか留意すべき点があります。

  • 矢印関数はコンストラクタとして使用できず、使用するとエラーが発生します。
  • 引数パラメータは使用できません。使用したい場合はrestを使用してください。
  • yieldコマンドは使用できないため、矢印関数をジェネレータ関数として使用することはできません。
  • 独自の this がないため、bind、call、apply を通じて this ポインターを変更することはできません。
  • しかし、これは矢印関数の this ポインターが静的であることを意味するわけではありません。外側のコード ライブラリの this ポインターを変更することで制御できます。
  • 矢印関数の this は外部のコード ベースから継承されるため、矢印関数の this は定義時にバインドされますが、通常の関数の this は呼び出されたときに決定されます。
  • リテラルオブジェクト内で直接定義された矢印関数のthisはオブジェクトにバインドされず、外側に向けられます。最も単純なケースはwindowにバインドすることです。

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(); // ウィンドウ

出力の各行の分析:

let f1 = obj.fun1() // obj

これは明らかに暗黙のバインディングであり、fun1のthisはobjを指しています。

f1() // obj

前の行で返された矢印関数がここで実行されます。前のコードベースのthisがobjを指していることを解析すると、直接継承され、矢印関数thisが指している

objlet f2 =obj.fun2()

fun2 が最初のレベルで実行されると、コードは出力されません。代わりに、関数が返され、f2 に割り当てられます。ここでバインディングの損失が発生し、this は元の obj ではなく window を指します (割り当てが発生)。

let f2_2 = f2() // window

f2()が実行され、リバウンドthis——windowが出力され、矢印関数が返されてf2_2fに割り当てられます。

2_2() // window

実行してwindowを出力します。外側のコードのthisはwindowを指していませんか?ここではwindowを継承してthisとします。

obj.fun3() // window

リテラル内で直接定義された矢印関数はオブジェクトの this を継承できませんが、1 層外側を見て window を見つけます。これは、リテラル オブジェクトは独自のスコープを形成できないのに対し、コンストラクターは形成できるためです。

では、矢印関数の this ポインターをどのように操作するのでしょうか?

答えは、外側のコード ベースの this ポインターを変更し、矢印関数を定義する前に this の方向を変更することです。

上記のコードに基づいて:

fun4 = f2.bind(obj)() // オブジェクト
fun4() // オブジェクト

第 2 レベル メソッドの this ポインターが変更され、矢印関数も継承されていることがわかりました。

  fun2: 関数() {
    return function () { // ここでこれを変更します
      console.log(これを);
      return () => { // ここで定義すると継承されます console.log(this);
      }
    }
  },

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript関数の詳細な説明これを指す問題
  • JavaScript プロトタイプオブジェクトの this ポイント問題の詳細な説明
  • このリファレンスとJavaScriptのカスタムプロパティの詳細な説明
  • JavaScriptのthisキーワードは

<<:  Navicatを使ってMySQLを操作する方法

>>:  CSS3 は下部に固定されたフッターを実装します (ページの高さに関係なく常に下部にあります)

推薦する

Linux の文字端末でマウスを使って赤い四角形を移動する方法

すべてがファイルです! UNIX はすでにそれを言っています。エリック・レイモンドはこう言いました。...

Dockerはローカルディレクトリとデータボリュームコンテナ操作をマウントします

1. DockerはローカルディレクトリをマウントしますDocker は、ホスト上のディレクトリをイ...

Centos7でのMySQLインストールチュートリアル

MySQLインストールチュートリアル、参考までに具体的な内容は次のとおりです。 1. ダウンロードY...

HTML はテキストの外側に省略記号を表示します...テキストオーバーフローによって実装されます

div または span に同時に CSS を適用する必要があります。コードをコピーコードは次のとお...

JavaScript は 9 グリッドのクリックによる色の変更効果を実装します

この記事では、9グリッドクリックの色変更効果を実現するためのJavaScriptの具体的なコードを参...

テーブルの幅を固定して、テキストによって幅が変わらないように設定

ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...

WeChat アプレットのカスタム タブバー コンポーネント

この記事では、WeChatアプレットのカスタムタブバーコンポーネントの具体的なコードを参考までに紹介...

CentOS7 に MySQL データベースをインストールしてデバッグする詳細な手順 [例]

この例では、デバッグ用の MySQL データベースをダウンロードしてインストールする必要があります。...

CSS3+JS による虫眼鏡モードの完璧な実装の詳細説明

約 1 年前、私は「虫眼鏡効果を模倣するいくつかの方法の原理の分析」という記事を書きました。当時、自...

CSSボックスモデルの紹介を読めば、混乱することはなくなるでしょう

Web デザインでよく耳にするプロパティ名: content、padding、border、marg...

2列の水平タイムラインを実装するためのVueサンプルコード

目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...

H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS

どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...

Centos ベースイメージの作成方法

序文現在、私の会社で使用しているオペレーティングシステムはすべて CentOS7.4 で、アプリケー...

HTML チュートリアル: よく使われる HTML タグのコレクション (6)

関連記事:初心者が学ぶ HTML タグ (5)導入された HTML タグは、必ずしも XHTML 仕...

MySQLデータベースインデックスの欠点と適切な使用

目次インデックスの適切な使用1. 通常のインデックスのデメリット2. 主キーインデックスの落とし穴3...