ES6のアロー機能とこのポインティングの詳細な説明

この記事では、javascript に関する関連知識を提供します, 主にアロー関数とこれによって指摘される関連問題を紹介します. 通常の関数における this は、この関数が呼び出されたときのオブジェクトを表します。アロー関数には独自の this がありません。アロー関数内の this は外部の this を継承します。見てみましょう。皆さんの参考になれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

1 . アロー関数

Use arrows => 関数の定義

 var fn = function(num){
    return num;}var fn1 = (num)=>num;var fn3 = ()=>1;var  fn4 = (num1,num2,num3)=>num

アロー関数のコード ブロック部分に複数のステートメントがある場合は、中かっこを使用してステートメントを囲み、次を使用します。戻るに戻る。

        var func = (a,b)=>{
            return a+b;
        }

中括弧 {} はコード ブロックとして解釈されるため、アロー関数が直接オブジェクトを返す場合は、オブジェクトの外側に中括弧を追加する必要があります。追加しないとエラーが報告されます。

var func = (a,b)=>{name:a,age:b} //报错var func4 = (a,b)=>{
    return {
      name: a,
      age :b   } } // 不报错

アロー関数には、このポインティングの問題を解決するという、より重要な役割もあります。

2.this は

を指します。まず、通常の関数での this について説明します。通常の関数での this は、この関数が呼び出されたときのオブジェクトを表します。アロー関数には独自の this はなく、アロー関数内の this は外部の this を継承します。あるいは、コード

ブロックの概念を使用して説明する方が直観的です。アロー関数の this は、外側のコード ブロックの this です。例を示します:

アロー関数は ES6 の新機能です。独自の this はなく、this ポイントはありません。コードベースの継承。

アロー関数を使用する場合は、いくつか注意すべき点があります。

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

PS: 実際の開発環境では、React はアロー関数を使用して問題を解決できます。典型的な質問なので、ここでは詳しく説明しません。

アロー関数の実際の状況を確認するための例を示します:

const obj = {
  fun1: function () {
    console.log(this);
    return () => {
      console.log(this);
    }
  },
  fun2: function () {
    return function () {
      console.log(this);
      return () => {
        console.log(this);
      }
    }
  },
  fun3: () => {
    console.log(this);
  }
}

let f1 = obj.fun1(); // obj
f1() // obj

let f2 = obj.fun2();
let f2_2 = f2(); // window
f2_2() // window

obj.fun3(); // window

各行の出力の分析:

let f1 = obj.fun1() // obj

明らかなことここで行われるのは暗黙的な型バインディングです。fun1 の this は obj を指します

f1() // obj

前の行から返されたアロー関数がここで実行されます。コード ライブラリの前の層の this が obj を指していると分析します。直接継承され、これが指すアロー関数は

objlet f2 =obj.fun2()

fun2の最初の層は、実行時にコードを出力しませんでしたが、関数を返し、それをf2に割り当てました。ここでバインドロスが発生しました。これは元の obj から window を指します (割り当てが発生しました)

let f2_2 = f2() // window

f2() が実行され、変更された this——window が出力され、アロー関数が返されて f2_2f

2_2() // window

# に割り当てられます。 ## 実行してウィンドウを出力します。先ほどの外層です。 コードの this は window を指しているのではないので、ここでは window が this として継承されます。

obj.fun3() // window

リテラルで直接定義されたアロー関数は継承できませんリテラル オブジェクトは独自のスコープを形成できませんが、コンストラクターは形成できるため、その代わりに、外側の 1 つのレイヤーを見てください。

それでは、アロー関数の this ポイントを制御するにはどうすればよいでしょうか:

答えは、外側のコード ベースの this ポイントを変更し、その前に this の方向を変更するだけです。アロー関数が定義されています。

上記のコードに基づく:

let fun4 = f2.bind(obj)() // obj
fun4() // obj

変更されたのは第 2 層メソッドのこの点であり、アロー関数は次のとおりであることがわかりました。も継承されています。

  fun2: function () {
    return function () { // 我们修改的是这里的this
      console.log(this);
      return () => { // 然后这里定义的时候就继承啦
        console.log(this);
      }
    }
  },

【関連する推奨事項:

JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がES6のアロー機能とこのポインティングの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。