JS中創(chuàng)建函數的三種方式及區(qū)別

更新時間：2016年03月13日 12:59:26 投稿：hebedich

這篇文章主要介紹了js函數的多種定義方法與其區(qū)別，非常的詳細，有需要的小伙伴可以參考下

1.函數聲明

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

2.函數表達式，又叫函數字面量

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

兩者的區(qū)別：解析器會先讀取函數聲明，并使其在執(zhí)行任何代碼之前可以訪問；而函數表達式則必須等到解析器執(zhí)行到它所在的代碼行才會真正被解釋執(zhí)行。

自執(zhí)行函數嚴格來說也叫函數表達式，它主要用于創(chuàng)建一個新的作用域，在此作用域內聲明的變量，不會和其它作用域內的變量沖突或混淆，大多是以匿名函數方式存在，且立即自動執(zhí)行。

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

另外幾種自執(zhí)行函數：

  //可用來傳參
  (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

從技術角度講，這是一個函數表達式。一般不推薦用這種方法定義函數，因為這種語法會導致解析兩次代碼（第一次是解析常規(guī)ECMAScript代碼，第二次是解析傳入構造函數中的字符串），從而影響性能。

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

Function()構造函數每次執(zhí)行時都會解析函數主體，并創(chuàng)建一個新的函數對象，所以當在一個循環(huán)或頻繁執(zhí)行的函數中調用Function()構造函數效率是非常低的。而函數字面量卻不是每次遇到都會重新編譯的，用Function()構造函數創(chuàng)建一個函數時并不遵循典型的作用域，它一直把它當作是頂級函數來執(zhí)行。

您可能感興趣的文章: