匿名函式和閉包的相關應用詳解

本章節詳細介紹一下匿名函式和閉包的相關應用，需要的朋友可以做一下參考。

一.匿名函式:

所謂匿名函式就是沒有名稱的函式，非具名函式。

（1）.具名函式的建立:

建立方式一:

[JavaScript] 純文字檢視 複製程式碼
function func(webName) {
  console.log(webName);
}

上面是最為常見的建立函式的方式。

建立方式二:

[JavaScript] 純文字檢視 複製程式碼
var func = new Function('webName', 'console.log(webName);');

關於建構函式Function可以參閱javascript Function()建構函式簡單介紹一章節。

建立方式三:

[JavaScript] 純文字檢視 複製程式碼
var func = function (webName) {
  console.log(webName);
}

上面的程式碼其實右側是建立的一個匿名函式，然後將匿名函式的地址賦值給變數func。

（2）.匿名函式的建立:

上面第三種就是一個匿名函式的建立。

下面再來看一種方式:

[JavaScript] 純文字檢視 複製程式碼
(function (webName) {
  console.log(webName);
})("螞蟻部落");

二.閉包:

所謂的閉包簡單的說就是函式的巢狀，內層的函式可以使用外層函式的變數，即使外層函式已經執行完畢，變數依然駐留記憶體的一種現象。更多相關內容可以參閱javascript閉包概念簡單解析一章節。

程式碼例項一:

[JavaScript] 純文字檢視 複製程式碼
function func() {
  var url = "softwhy.com";
  return function () {
    console.log(url);
  }
}
var antzone = func();
antzone();

下面就對上面的程式碼做一下簡單介紹:

通常情況下，如果一個函式執行完畢，那麼它內部的變數都會銷燬，但是func函式內部巢狀有一個匿名函式，func()函式執行的時候，會返回此匿名函式，又因為匿名函式會使用變數url，所以此變數不會被銷燬。只有當antzone()執行完畢，變數url才會被釋放。

程式碼例項二:

使用閉包優化程式碼，原來的程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function forTimeout(x, y) {
  console.log(x + y);
}
function delay(x, y, time) {
  setTimeout('forTimeout(' + x + ',' + y + ')', time);
}

程式碼優化如下:

[JavaScript] 純文字檢視 複製程式碼
function delay(x , y , time){
  setTimeout(
    function(){
      forTimeout(x , y) 
    } , time);   
}

上面的程式碼是不是更加清晰，編寫起來也更加容易了。

使用匿名函式可以建立閉包，並且還可以構建名稱空間，以減少全域性變數的使用。

程式碼例項三:

[JavaScript] 純文字檢視 複製程式碼
var oEvent = {};
(function () {
  var addEvent = function () {
    //code
  };
  function removeEvent() {
    //code
  }
  oEvent.addEvent = addEvent;
  oEvent.removeEvent = removeEvent;
})();

函式addEvent和removeEvent都是區域性變數。

但可以通過全域性變數oEvent使用它，這就減少全域性變數的使用，增強了網頁的安全性。

程式碼例項四:

先看一段程式碼例項，這是關於匿名函式的：

[JavaScript] 純文字檢視 複製程式碼
var rainman = (function (x, y) {
  return x + y;
})(2, 3);
console.log(rainman);

再來看如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
var rainman = function(x , y){
  return x + y;
}(2, 3);
console.log(rainman);

這個程式碼和上面的程式碼其實是一回事，上面的程式碼使用小括號將匿名函式包裹可以讓程式碼更加清晰。

程式碼示例五:

[JavaScript] 純文字檢視 複製程式碼
var outer = null;
 
(function () {
  var one = 1;
  function inner() {
    one += 1;
    console.log(one);
  }
  outer = inner;
})();
 
outer();
outer();
outer();

這段程式碼中的變數one是一個區域性變數（因為它被定義在一個函式之內），因此外部是不可以訪問的。

這裡建立inner函式，此函式是可以訪問變數one；又將全域性變數outer引用inner，所以三次呼叫outer會彈出遞增的結果。