JS で関数を作成する 3 つの方法とその違い

1. 関数宣言

function sum1(n1,n2){
    return n1+n2;
  };

2. 関数式 (関数リテラルとも呼ばれます)

var sum2=function(n1,n2){
    return n1+n2;
};

両方パーサーは、コードを実行する前にまず関数宣言を読み取り、アクセスできるようにします。一方、関数式は、実際に解釈されて実行される前に、パーサーがそれが配置されているコード行に到達するまで待機する必要があります。

厳密には、自己実行関数は関数式とも呼ばれます。これは主に、このスコープで宣言された変数が他のスコープの変数と競合したり混同されたりすることはありません。そのうちの無名関数として存在し、すぐに自動的に実行されます。

(function(n1,n2){
    console.log (n1+n2)
})(1,3);//4

他のいくつかの自己実行関数:

  //可用来传参
  (function(x,y){
    console.log(x+y);
  })(2,3);

  //带返回值
  var sum=(function(x,y){
    return x+y;
  })(2,3);
  console.log(sum);

  ~function(){
    var name='~'
    console.log(name);
  }();

  !function(){
    var name='!'
    console.log(name);
  }();

  ;(function(){
    var name=';'
    console.log(name);
  })();

  -function(){
    var name='-'
    console.log(name);
  }();

  //逗号运算符
  1,function(){
    var name=',';
    console.log(name);
  }();

  //异或
  1^function(){
    var name='^';
    console.log(name);
  }();

  //比较运算符
  1>function(){
    var name='>';
    console.log(name);
  }();

  ~+-!(function(){
    var name='~+-!';
    console.log(name);
  })();

  ~!(function(){
    var name='~!';
    console.log(name);
  })();

  (function(){
    var name='call';
    console.log(name);
  }).call();

  (function(){
    var name='apply';
    console.log(name);
  }).apply();

3. 関数構築メソッド、パラメーターは引用符で囲む必要があります

var sum3=new Function('n1','n2','return n1+n2');
console.log(sum3(2,3));//5

厳密に言えば、これは関数式です。この構文ではコードが 2 回解析されることになるため (1 回目は通常の ECMAScript コードを解析し、2 回目はコンストラクターに渡された文字列を解析する)、この方法で関数を定義することは一般的に推奨されません。したがって、パフォーマンスに影響します。

var name='haoxl';
  function fun(){
    var name='lili';
    return new Function('return name');//不能获取局部变量
  }
 console.log(fun()());//haoxl

Function() コンストラクターは関数本体を解析し、実行されるたびに新しい関数オブジェクトを作成するため、ループ内で Function を呼び出すときや頻繁に実行される function ()コンストラクターの効率は非常に低いです。 Function() コンストラクターを使用して関数を作成する場合、関数リテラルは常に再コンパイルされず、常にトップレベル関数として実行されます。

【おすすめ関連チュートリアル】

1. JavaScript ビデオチュートリアル
2. JavaScript オンラインマニュアル
3.ブートストラップ チュートリアル