JavaScript中創(chuàng)建函數(shù)主要有兩種方法：函數(shù)聲明和函數(shù)表達式。這兩種方式都有不同的適用場景。這篇筆記主要關(guān)注的是函數(shù)表達式的幾大特點以及它的使用場景，下面一一描述。

主要特點

•可選的函數(shù)名稱

函數(shù)名稱是函數(shù)聲明的必需組成部分，這個函數(shù)名稱相當(dāng)于一個變量，新定義的函數(shù)會復(fù)制給這個變量，以后函數(shù)的調(diào)用都需要通過這個變量進行。而對于函數(shù)表達式來說，函數(shù)的名稱是可選的，例如下面的例子：

var sub = function(a1,a2){ 
  return a1-a2; 
} 

這個例子中函數(shù)表達式?jīng)]有名稱，屬于匿名函數(shù)表達式。再看下面的例子：

var sub = function f(a1,a2){ 
  return a1-a2; 
} 
console.log(f(5,3));  //錯誤調(diào)用方式 
console.log(sub(5,3));  //正確調(diào)用方式 

在這個例子中，函數(shù)表達式的名稱為f，這個名稱f實際上變成了函數(shù)內(nèi)部的一個局部變量，并且指代函數(shù)對象本身，在函數(shù)遞歸的時候有很大用處，后面會詳細講到。

•在執(zhí)行階段創(chuàng)建(區(qū)別于函數(shù)聲明)

這個特點是函數(shù)表達式明顯區(qū)別于函數(shù)聲明的地方。

解釋器在解析JavaScript代碼時對于這兩種方式并不是一視同仁的。解釋器會首先讀取函數(shù)聲明，并使其在執(zhí)行任何代碼之前可用；而對于函數(shù)表達式，則必須等到解釋器執(zhí)行到它所在的代碼行，才會被真正解析執(zhí)行。例如：

console.log(add(1,2));  //"3" 
console.log(sub(5,3));  //"unexpected identifier"，報錯 
function add(a1,a2){ 
  return a1+a2; 
} 
var sub = function(a1,a2){ 
  return a1-a2; 
} 

第一條語句完全可以正常執(zhí)行。對代碼求值時，JavaScript引擎在第一遍就會聲明函數(shù)并通過一個名為函數(shù)聲明提升的過程將它們放到源代碼樹的頂部。也就是說在執(zhí)行環(huán)境的創(chuàng)建階段(函數(shù)被調(diào)用但還沒有開始執(zhí)行)就會對函數(shù)聲明進行"hosting"操作。所以，即使聲明函數(shù)的代碼在調(diào)用它的代碼后面，JavaScript引擎也會把函數(shù)聲明提升到頂部。但是如果把函數(shù)聲明更改為函數(shù)表達式，就會在執(zhí)行期間報錯。原因在于在執(zhí)行到函數(shù)所在的語句之前，變量sub中并不會包含對函數(shù)的引用。也就是說在代碼執(zhí)行階段，變量sub才會被賦值。除了以上不同，在其它方面函數(shù)聲明和函數(shù)表達式的語法是等價的。

•不會影響變量對象

var sub = function f(a1,a2){ 
  console.log(typeof f); //"function" 
  return a1-a2; 
} 
console.log(typeof f);  //"Uncaught ReferenceError: f is not defined(…)" 

通過上面的例子可以看到，函數(shù)名稱f只能在函數(shù)對象內(nèi)部使用，函數(shù)表達式的函數(shù)名稱并不存在于變量對象中。

使用場景

函數(shù)表達式的使用場景很多。下面主要描述的是函數(shù)遞歸以及代碼模塊化方面的應(yīng)用。

•函數(shù)遞歸

看下面的例子：

function factorial(num){ 
  if(num <= 1){ 
     return 1; 
  }else{ 
     return num * factorial(num - 1); 
  } 
} 

這是一個經(jīng)典的階乘函數(shù)，但是這個例子存在的一個問題是函數(shù)名稱factorial與函數(shù)體緊密耦合在一起，執(zhí)行下面的語句就會報錯：

var anotherFactorial = factorial; 
factorial = null; 
console.log(anotherFactorial(5));  //"Uncaught TypeError: factorial is not a function" 

報錯的原因在于在函數(shù)體內(nèi)部會調(diào)用factorial函數(shù)，而變量factorial對函數(shù)的引用已經(jīng)被解除所以報錯。這種情況的解決方法一般可以使用arguments.callee來解決，arguments.callee始終指向當(dāng)前的函數(shù)，例如：

function factorial(num){ 
  if(num <= 1){ 
     return 1; 
  }else{ 
     return num * arguments.callee(num - 1); 
  } 
} 

 這樣在此執(zhí)行anotherFactorial函數(shù)就可以得到正確結(jié)果了。但是在嚴(yán)格模式"strict"下，arguments.callee是不能通過腳本訪問的，這是就可以使用函數(shù)表達式來解決這個問題了，例如：

var factorial = (function f(num){ 
  if(num <= 1){ 
     return 1; 
  }else{ 
     return num * f(num - 1); 
  } 
}); 
console.log(factorial(5));  //"120" 

 •代碼模塊化

JavaScript中沒有塊級作用域，但我們可以使用函數(shù)表達式模塊化JavaScript代碼。模塊化代碼中可以封裝不必讓使用者知道的細節(jié)，只暴露給使用者相關(guān)接口，同時可以避免對全局環(huán)境的污染，例如：

var person = (function(){ 
  var _name = ""; 
  return{ 
    getName:function(){ 
       return _name; 
    }, 
    setName:function(newname){ 
       _name = newname; 
    } 
  }; 
}()); 
person.setName("John"); 
person.getName();  //"John"

 這個例子中創(chuàng)建了一個匿名函數(shù)表達式，這個函數(shù)表達式中包含了模塊自身的私有變量和函數(shù)；這個函數(shù)表達式的執(zhí)行結(jié)果返回一個對象，對象中包含了模塊暴露給使用者的公共接口。代碼模塊化的具體形式還有很多，例如在一些常用的JavaScript庫中通常都會使用類似下面例子的立即執(zhí)行函數(shù)：

(function(){ 
  var _name = ""; 
  var root = this; 
  var person = { 
    getName: function(){ 
      return _name; 
    }, 
    setName: function(newname){ 
      _name = newname; 
    } 
  }; 
  root.person = person; 
}.call(this)); 
person.setName("John"); 
person.getName();  //"John"

 這種方式直接將包含模塊公共接口的對象作為全局對象的一個屬性，這樣在其它地方直接可以使用全局對象的這個屬性來使用這個模塊了。

以上這篇老生常談JavaScript 函數(shù)表達式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論