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);
      }
    }
  },