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

PHPz
リリース: 2018-10-15 14:06:57
オリジナル
1455 人が閲覧しました

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.ブートストラップ チュートリアル

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート