JavaScript の名前付きアロー関数と匿名アロー関数の重要な違い (推奨)

名前付き関数とは、明示的に名前を与える関数、function abs(x){} を指します。匿名関数とは、function(){} のように、キーワード function のみを持ち、abs のような関数名を持たない関数を指します。 ES6 標準では、新しい関数であるアロー関数が追加されています。アロー関数は、表面的には匿名関数と同等であり、関数定義を簡素化します。それらの違いは何ですか?

1 名前付き関数と匿名関数の違い

違い: 匿名関数は別の変数 let a にアドレスを割り当ててから、 a を使用して関数を呼び出す必要がありますが、名前付き関数は関数名を明示的に指定するため、直接呼び出すことができます。この関数名で呼び出します。

名前付き関数の戻り値は、関数本体の戻り値です。たとえば、abs(x) 関数の戻り値は数値変数です。関数を呼び出すときは、abs(6) を直接呼び出します。これは非常に理解しやすいです。

function abs(x){
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

しかし、匿名関数についてはどうでしょうか?以下に示すように、この関数は明示的に関数名を与えていませんが、ここでの abs にはこの無名関数のアドレスが割り当てられているため、使用時に abs(-3) を直接使用することができます。

let abs=function(x){
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

2 アロー関数

ES6 標準には、アロー関数という新しい関数が追加されています。なぜアロー関数と呼ばれるのでしょうか?その定義には矢印が使用されているためです。アロー関数は表面的には無名関数と同等であり、関数定義を簡素化します。

アロー関数には 2 つの形式があります。1 つは式を 1 つだけ含むもので、{...} と return も省略されます。

x => x * x

上記のアロー関数は、匿名関数 "" と同等です。

function (x) {
 return x * x;
}

この場合、{...} と return は省略できません:

(x,y) => {
 if (x > 0) {
  return x + y;
 }
 else {
  return -x + y;
 }
}

3 アロー関数と無名関数の違い

アロー関数は無名関数の略称のように見えますが、実はアロー関数と無名関数には明確な違いがあります。アロー関数の中にはこうあります。語彙範囲は文脈によって決まります。

関数 obj1.getAge(2017) を呼び出した場合と obj2.getAge(2017) を呼び出した場合は同じ結果が得られますか?

obj1 の fn 関数は、JavaScript 関数によるこのバインディングの誤った処理により、期待された結果を取得できません。

しかし、obj2 関数と fn 関数はアロー関数です。アロー関数は、常に外部呼び出し元 obj2 である字句スコープを指します。

var obj1 = {
 birth: 1990,
 getAge: function (year) {
  let fn=function(y){
   return y - this.birth; // this指向window或undefined
  };
  return fn(year);
 }
};
var obj2 = {
 birth: 1990,
 getAge: function (year) {
  var fn = (y) => y - this.birth; // this.birth为1990
  return fn(year);
 }
};

4 要約

名前付き関数と比較して、匿名関数は、別の変数 let a にアドレスを割り当ててから、 a を使用して関数を呼び出す必要がありますが、アロー関数はこれを完全に修復します。 、これは常に字句スコープを指します。

上記は、エディターによって紹介された Javascript の名前付き矢印関数と匿名矢印関数の重要な違いです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。 ！

JavaScript の名前付きアロー関数と匿名アロー関数のさらに重要な違いについては (推奨)、PHP 中国語 Web サイトに注目してください。