JavaScriptの関数式

JavaScriptには、同じことを行う多くの方法があります。 これには良い面と悪い面があります。 初心者にとって、これは間違いなく悪いことです。なぜなら、彼はより多くの情報を勉強する必要があるだけでなく、潜在的な間違いを犯す場所がもっとあるからです。 これは、関数を定義するときに発生する可能性があります。



関数を宣言するにはさまざまな方法があります。



function A() {}; //   var B = function () {}; //   var C = (function () {}); //      var D = function foo () {}; //    var E = (function () {})(); //    var F = new Function(); //   var G = new function() {}; //  :  
      
      





そのような豊かさに戸惑うことはありませんよね? 原則として、日常生活では3種類以上の関数宣言を使用しませんが、これは非常に効果的です。 ただし、もう少し深く掘り下げると、関数を宣言する操作に含まれる秘跡や落とし穴がどれだけあるのか、ほとんどの人が疑わないこともあります。



ECMAドキュメントによると、関数定義の構文は次のとおりです。

 : function  (  ) {  } : function  () (  ) {  }
      
      





これらの定義は非常によく似ていますが、関数宣言と関数式の間には大きな違いがあります。 関数宣言は、コードが実行される前に作成されますが、 関数式は、インタープリターがこのコード行に到達したときにのみ作成されます。



関数式は、式のコンテキストでの関数宣言です。



関数式の例をいくつか考えてみましょう。



代入演算子


 var a = function() {};
      
      





これは、割り当てによって関数式を定義する典型的な例です。 代入演算子は右側の式を予期しているため、関数は式の一部になります。

少し想像してみて、次の例を思いつくことができます。



 var a = function() { return 1; }() + 12; // 13 var b = function() { return 1; } + ''; // function (){return 1} var c = function() { return 1; } + '' - 1; //NaN
      
      







グループ化演算子



関数を宣言すると、すぐに実行することはできませんが、関数宣言を括弧で囲むとこれが可能になります。 グループ化演算子は括弧で表され、この場合、関数宣言を関数式に変換します。



 function foo() { return 1; } // undefined function foo() { return 1; }(); // Uncaught SyntaxError: Expected () to start arrow function, but got '}' instead of '=>' (function foo() { return 1; }()) // 1 (function foo() { return 1; })() // 1
      
      





最初のケースでは関数を定義してすぐに実行する式を実行し、2番目のケースでは次に実行される関数を定義する式が実行されるため、3番目と4番目のオプションに基本的な違いはありません。





コンマ演算子


コンマ演算子は、各オペランドの値(左から右へ)を計算し、最後のオペランドの値を返します。



 0, function() { return 1; }(); // 1
      
      







演算子(+、-、!、〜、Void)


 +function() { return false; }(); // 0 -function() { return false; }(); // -0 !function() { return false; }(); // true ~function() { return false; }(); // -1 void function() { return false; }(); //undefined
      
      







結合演算子:


 !-function () { return false; }(); // true var c = 5 * (2 - function () {return 1}()) // 5 var c = 5 * 2 - -~function () {return 1}() // 8
      
      







名前付き関数式と名前なしの違い:



多くの場合、関数自体にアクセスする必要がない限り、関数式に割り当てられた名前は、残りのコードのコンテキストでは冗長です。 関数式名の範囲は、関数自体に限定されます。



 var f = function getFactorial (n) { return n ? n * getFactorial(n - 1) : 1; }; f(5); // 120
      
      







重要:

覚えておいてください、あなたは人々のためにコードを書くので、忍者スタイルのコードを書かないようにしてください。 この記事に記載されている知識は、言語の内部構造を理解するのに役立ち、プロジェクトの1つやインタビューで突然そのような表現に遭遇した場合に混乱することはありません。



All Articles