概述

在JavaScript前端開發中，函式與對其狀態即詞法環境（lexical environment）的引用共同構成閉包（closure）。也就是說，閉包可以讓你從內部函式訪問外部函式作用域。在JavaScript，函式在每次建立時生成閉包。匿名函式和閉包可以放在一起學習，可以加深理解。本文主要通過一些簡單的小例子，簡述匿名函式和閉包的常見用法，僅供學習分享使用，如有不足之處，還請指正。

普通函式

普通函式由fucntion關鍵字，函式名，() 和一對{} 組成，如下所示：

 function box(){
   return 'Hex';
 }
 alert(box());

匿名函式

顧名思義，匿名函式就是沒有實際名字的函式。單獨的匿名函式無法執行，如下所示：

 function (){
   return 'Hex';
 }
 //以上，會報錯：缺少識別符號

如何解決匿名函式不能執行的問題呢？有如下幾種方法：

1. 把匿名函式賦值給變數，如下所示：

 //把匿名函式賦值給變數
 var box=function(){
   return 'Hex';
 }
 alert(box());

2. 通過自我執行來呼叫函式，格式如下：(匿名函式)()

 (function(){
   alert('Hex');
 })();

3. 把匿名函式自我執行的返回值賦值給變數，如下所示：

 var box=(function(){
   return 'Hex';
 })();
 alert(box);//注意：此處不帶括弧

4. 或者省去變數，如下所示：

 alert((function() {
   return 'Hex';
 })());

自我執行匿名函式如何傳遞引數呢？如下所示：

 (function(age) {
   alert('Hex--' + age);
 })(30);

閉包（closure）

閉包是由函式以及建立該函式的詞法環境組合而成。這個環境包含了這個閉包建立時所能訪問的所有區域性變數。簡單理解：函式裡面套函式，子函式可以訪問父函式的作用域裡面的變數。

1. 函式裡面放匿名函式，如下所示：

function box(){
  //閉包
  return function(){
    return 'Hex';
  }
}
alert(box()());
//或者
var b=box();
alert(b());

2. 通過閉包返回區域性變數，使用閉包可以有一個優點，和是它的缺點，可以是區域性變數駐留在記憶體中。

function box(){
  var age=100;//此變數為函式的區域性變數，外部無法訪問
  return function(){
    return age;
  }
}
alert(box()());

閉包和全域性變數相比較

1. 使用全域性變數累加，如下所示：

var age=100;
function box(){
  age++;
}
alert(age);
box();
alert(age);
box();
alert(age);

2. 使用區域性變數累加，如下所示：

function box(){
  var age=100;
  age++;
  return age;
}
alert(box());//無法實現累加
alert(box());//無法實現累加
alert(box());//無法實現累加

3. 使用閉包實現累加，如下所示：

function box(){
  var age=100;
  return function(){
    age++;
    return age;
  }
}
var b=box();//將返回值賦值給b
alert(b());//實現累加
alert(b());//實現累加
alert(b());//實現累加
b=null;//使用閉包在呼叫結束時不會立即銷燬記憶體，導致效能下降,所以需要解除佔用

差異：使用全域性變數，容易引起命名衝突，且系統性能下降。

迴圈匿名函式取值問題

1. 迴圈裡的匿名函式取值問題，如下所示：沒有實現arr[0]=0,arr[1]=1 ...arr[4]=4的效果

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=function(){
      return i;
    }
  }
  //函式返回之前，迴圈已經結束，i=5
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]()); //此時返回的都是5，沒有實現arr[0]=0,arr[1]=1 ...arr[4]=4的效果
}

以上問題如何優化呢？

方法1，直接賦值，不採用閉包，如下所示：

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=i; //直接賦值
  }
  //函式返回之前，迴圈已經結束，i=5
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]);
}

方法2，通過匿名函式的自我執行，如下所示：

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=(function(num){
    　　//此處可以有其他一些邏輯
    　　return num;
    })(i);
  }
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]);
}

方法3，將變數駐留在記憶體中，如下所示：

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=(function(num){
      //此處可以有其他一些邏輯
      return function(){
      　　return num;
      };
    })(i);
  }
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]());
}

關於this的指向問題

對於物件內部，this指向物件本身，如下所示：

 var box={
   getThis:function(){
     return this;
   }
 };
 alert(box.getThis());//輸出[object Object] //此處this指box物件

var user='The window';
var box={
  user:'The box',getUser:function(){
    return this.user;
  }
}
alert(box.getUser());//輸出：the box

this在閉包中，指示window物件，所以閉包在執行時指向window，如下所示：

var box1 ={
  getThis:function(){
    return function(){
      return this;
    }
  }
};
alert(box1.getThis()()); //輸出[object Window]//此處this是window物件

var box1={
  user:'The box',getUser:function(){
    //此處的作用域是box1
    return function(){
      //此處的作用域是widow
      return this.user;
    };
  }
}
alert(box1.getUser()());//輸出：the window ，表示閉包在執行時模擬this指向window

如何讓閉包的this指向box呢？可以有如下兩種方法，如下所示：

alert(box1.getUser().call(box1));//物件冒充
//可以將box的作用域物件傳遞給閉包
var box1={
  user:'The box',getUser:function(){
    var that=this;
    return function(){
      return that.user;
    };
  }
}
alert(box1.getUser()());

缺點：閉包無法釋放物件，容易導致記憶體洩漏，如下所示：

function box(){
  var a1=document.getElementById('A01');
  var txt=a1.innerHTML;
  a1.onclick=function(){
    //如果a1為null，則會報錯
    //alert(a1.innerHTML);//點選事件獲取內容,alert(txt);
  }
  //如無下面一句，則會導致記憶體無法釋放物件a1
  a1=null;//此處需要手動將a1釋放，等待回收
}
box();

塊級作用域

模仿塊級作用域，面向物件的思想，封裝變數。普通函式沒有塊級作用域的概念，如下所示：

function box(){
  for (var i=0;i<5;i++) {

  }
  alert(i);//輸出：5，表示出了for語句塊，i依然可以訪問
}
box();

如何讓i私有化，出了作用域，不可以訪問呢?可以採用匿名函式的自我執行，則出了作用域就會訪問不到，如下所示：

function box(){
  (function(){
    for (var i=0;i<5;i++) {

    }
  })();
  //alert(i);//報錯：提示“i”未定義
}
box();

全域性變數的私有作用域，減少變數的命名衝突，如下所示：

 (function(){
   //此處就是全域性作用域裡面的私有作用域
   var age=100;
   alert(age);
 })();
 //alert(age);////報錯：提示“age”未定義

普通函式和建構函式的區別：首字母大寫。如下所示：物件的屬性和函式都是public型別的

function Box(){
  this.age=100; //此處是公有屬性，無法私有化
  //函式也是公有函式
  this.run=function(){
    return 'running....';
  }
}
var box=new Box();
alert(box.age); //通過物件可以訪問
alert(box.run());//通過物件可以訪問

如何將公有屬性，私有化呢? 如下所示：

function Box(){
  var age=100;//私有變數，外部訪問不到
  function run(){//私有函式，外部訪問不到
    return 'running....';
  }
  //對外公佈的訪問介面，可以訪問私有內容
  this.go=function(){
    return age+' '+run();
  }
}
var box=new Box();
alert(box.go());

通過建構函式傳遞引數，如下所示：

function Box(v){
  var user=v;
  this.getUser=function(){
    return user;
  };
  this.setUser=function(v){
    user=v;
  }
}
var box=new Box('Hex');
alert(box.getUser());
//物件方法可以在建立的時候，建立多次

注意：通過建構函式建立物件，在每次建立的時候，都會分配不同的地址。

靜態私有變數

採用靜態私有變數，可以實現資料的共享，如下所示：

(function(){
  var user=''; //私有變數
  Box=function(value){//必須全域性建構函式，將匿名函式賦值給Box,否則外部無法訪問
    user=value;
  }
  Box.prototype.getUser=function(){
    return user;
  };
  Box.prototype.setUser=function(value){
    user=value;
  };
})();
var box=new Box('AAAA'); //第一次例項化
alert(box.getUser());//輸出AAAA
var box2=new Box('BBBB');//第二次例項化
alert(box.getUser());//輸出BBBB

單例物件

單例即只有一個例項化的物件，可以有兩種實現方式。

1. 通過字面量的方式實現，如下所示：

var box={
  user:'hex',go:function(){
    return user+' is running....';
  }
};
alert(box.go());

2. 通過匿名函式的自我執行返回物件的方式實現，如下所示：

var box=function(){
  var user='Hex'; //私有變數
  function run(){ //私有函式
    return ' is running....';
  }
  //返回一個物件
  var obj= {
    //公共特權方法
    going:function(){
      return user+run();
    }
  }
  return obj;
}();
alert(box.going());

以上就是詳解JavaScript匿名函式和閉包的詳細內容，更多關於JavaScript匿名函式和閉包的資料請關注我們其它相關文章！