概述
在JavaScript前端開發中，函式與對其狀態即詞法環境（lexical environment）的參考共同構成閉包（closure），也就是說，閉包可以讓你從內部函式訪問外部函式作用域，在JavaScript，函式在每次創建時生成閉包，匿名函式和閉包可以放在一起學習，可以加深理解，本文主要通過一些簡單的小例子，簡述匿名函式和閉包的常見用法，僅供學習分享使用，如有不足之處，還請指正，
普通函式
普通函式由fucntion關鍵字，函式名，() 和一對{} 組成，如下所示：
1 function box(){ 2 return 'Hex'; 3 } 4 alert(box());
匿名函式
顧名思義，匿名函式就是沒有實際名字的函式，單獨的匿名函式無法運行，如下所示：
1 function (){ 2 return 'Hex'; 3 } 4 //以上，會報錯：缺少識別符號
如何解決匿名函式不能執行的問題呢？有如下幾種方法：
1. 把匿名函式賦值給變數，如下所示：
1 //把匿名函式賦值給變數 2 var box=function(){ 3 return 'Hex'; 4 } 5 alert(box());
2. 通過自我執行來呼叫函式，格式如下：(匿名函式)()
1 (function(){ 2 alert('Hex'); 3 })();
3. 把匿名函式自我執行的回傳值賦值給變數，如下所示：
1 var box=(function(){ 2 return 'Hex'; 3 })(); 4 alert(box);//注意：此處不帶括弧
4. 或者省去變數，如下所示：
1 alert((function() { 2 return 'Hex'; 3 })());
自我執行匿名函式如何傳遞引數呢？如下所示：
1 (function(age) { 2 alert('Hex--' + age); 3 })(30);
閉包（closure）
閉包是由函式以及創建該函式的詞法環境組合而成，這個環境包含了這個閉包創建時所能訪問的所有區域變數，簡單理解：函式里面套函式，子函式可以訪問父函式的作用域里面的變數，
1. 函式里面放匿名函式，如下所示：
1 function box(){ 2 //閉包 3 return function(){ 4 return 'Hex'; 5 } 6 } 7 alert(box()()); 8 //或者 9 var b=box(); 10 alert(b());
2. 通過閉包回傳區域變數，使用閉包可以有一個優點，和是它的缺點，可以是區域變數駐留在記憶體中，
1 function box(){ 2 var age=100;//此變數為函式的區域變數，外部無法訪問 3 return function(){ 4 return age; 5 } 6 } 7 alert(box()());
閉包和全域變數相比較
1. 使用全域變數累加，如下所示：
1 var age=100; 2 function box(){ 3 age++; 4 } 5 alert(age); 6 box(); 7 alert(age); 8 box(); 9 alert(age);
2. 使用區域變數累加，如下所示：
1 function box(){ 2 var age=100; 3 age++; 4 return age; 5 } 6 alert(box());//無法實作累加 7 alert(box());//無法實作累加 8 alert(box());//無法實作累加
3. 使用閉包實作累加，如下所示：
1 function box(){ 2 var age=100; 3 return function(){ 4 age++; 5 return age; 6 } 7 } 8 var b=box();//將回傳值賦值給b 9 alert(b());//實作累加 10 alert(b());//實作累加 11 alert(b());//實作累加 12 b=null;//使用閉包在呼叫結束時不會立即銷毀記憶體，導致性能下降,所以需要解除占用
差異：使用全域變數，容易引起命名沖突，且系統性能下降，
回圈匿名函式取值問題
1. 回圈里的匿名函式取值問題，如下所示：沒有實作arr[0]=0,arr[1]=1 ...arr[4]=4的效果
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=function(){ 5 return i; 6 } 7 } 8 //函式回傳之前，回圈已經結束，i=5 9 return arr; 10 } 11 var b=box(); 12 for (var i=0;i<5;i++) { 13 alert(b[i]()); //此時回傳的都是5，沒有實作arr[0]=0,arr[1]=1 ...arr[4]=4的效果 14 }
以上問題如何優化呢？
方法1，直接賦值，不采用閉包，如下所示：
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=i; //直接賦值 5 } 6 //函式回傳之前，回圈已經結束，i=5 7 return arr; 8 } 9 var b=box(); 10 for (var i=0;i<5;i++) { 11 alert(b[i]); 12 }
方法2，通過匿名函式的自我執行，如下所示：
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=(function(num){ 5 //此處可以有其他一些邏輯 6 return num; 7 })(i); 8 } 9 return arr; 10 } 11 var b=box(); 12 for (var i=0;i<5;i++) { 13 alert(b[i]); 14 }
方法3，將變數駐留在記憶體中，如下所示：
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=(function(num){ 5 //此處可以有其他一些邏輯 6 return function(){ 7 return num; 8 }; 9 })(i); 10 } 11 return arr; 12 } 13 var b=box(); 14 for (var i=0;i<5;i++) { 15 alert(b[i]()); 16 }
關于this的指向問題
對于物件內部，this指向物件本身，如下所示：
1 var box={ 2 getThis:function(){ 3 return this; 4 } 5 }; 6 alert(box.getThis());//輸出[object Object] //此處this指box物件
1 var user='The window'; 2 var box={ 3 user:'The box', 4 getUser:function(){ 5 return this.user; 6 } 7 } 8 alert(box.getUser());//輸出：the box
this在閉包中，指示window物件，所以閉包在運行時指向window，如下所示：
1 var box1 ={ 2 getThis:function(){ 3 return function(){ 4 return this; 5 } 6 } 7 }; 8 alert(box1.getThis()()); //輸出[object Window]//此處this是window物件
1 var box1={ 2 user:'The box', 3 getUser:function(){ 4 //此處的作用域是box1 5 return function(){ 6 //此處的作用域是widow 7 return this.user; 8 }; 9 } 10 } 11 alert(box1.getUser()());//輸出：the window ，表示閉包在運行時模擬this指向window
如何讓閉包的this指向box呢？可以有如下兩種方法，如下所示：
1 alert(box1.getUser().call(box1));//物件冒充 2 //可以將box的作用域物件傳遞給閉包 3 var box1={ 4 user:'The box', 5 getUser:function(){ 6 var that=this; 7 return function(){ 8 return that.user; 9 }; 10 } 11 } 12 alert(box1.getUser()());
缺點：閉包無法釋放物件，容易導致記憶體泄漏，如下所示：
1 function box(){ 2 var a1=document.getElementById('A01'); 3 var txt=a1.innerHTML; 4 a1.onclick=function(){ 5 //如果a1為null，則會報錯 6 //alert(a1.innerHTML);//點擊事件獲取內容, 7 alert(txt); 8 } 9 //如無下面一句，則會導致記憶體無法釋放物件a1 10 a1=null;//此處需要手動將a1釋放，等待回收 11 } 12 box();
塊級作用域
模仿塊級作用域，面向物件的思想，封裝變數，普通函式沒有塊級作用域的概念，如下所示：
1 function box(){ 2 for (var i=0;i<5;i++) { 3 4 } 5 alert(i);//輸出：5，表示出了for陳述句塊，i依然可以訪問 6 } 7 box();
如何讓i私有化，出了作用域，不可以訪問呢?可以采用匿名函式的自我執行，則出了作用域就會訪問不到，如下所示：
1 function box(){ 2 (function(){ 3 for (var i=0;i<5;i++) { 4 5 } 6 })(); 7 //alert(i);//報錯：提示“i”未定義 8 } 9 box();
全域變數的私有作用域，減少變數的命名沖突，如下所示：
1 (function(){ 2 //此處就是全域作用域里面的私有作用域 3 var age=100; 4 alert(age); 5 })(); 6 //alert(age);////報錯：提示“age”未定義
普通函式和建構式的區別：首字母大寫，如下所示：物件的屬性和函式都是public型別的
1 function Box(){ 2 this.age=100; //此處是公有屬性，無法私有化 3 //函式也是公有函式 4 this.run=function(){ 5 return 'running....'; 6 } 7 } 8 var box=new Box(); 9 alert(box.age); //通過物件可以訪問 10 alert(box.run());//通過物件可以訪問
如何將公有屬性，私有化呢? 如下所示：
1 function Box(){ 2 var age=100;//私有變數，外部訪問不到 3 function run(){//私有函式，外部訪問不到 4 return 'running....'; 5 } 6 //對外公布的訪問介面，可以訪問私有內容 7 this.go=function(){ 8 return age+' '+run(); 9 } 10 } 11 var box=new Box(); 12 alert(box.go());
通過建構式傳遞引數，如下所示：
1 function Box(v){ 2 var user=v; 3 this.getUser=function(){ 4 return user; 5 }; 6 this.setUser=function(v){ 7 user=v; 8 } 9 } 10 var box=new Box('Hex'); 11 alert(box.getUser()); 12 //物件方法可以在創建的時候，創建多次
注意：通過建構式創建物件，在每次創建的時候，都會分配不同的地址，
靜態私有變數
采用靜態私有變數，可以實作資料的共享，如下所示：
1 (function(){ 2 var user=''; //私有變數 3 Box=function(value){//必須全域建構式，將匿名函式賦值給Box,否則外部無法訪問 4 user=value; 5 } 6 Box.prototype.getUser=function(){ 7 return user; 8 }; 9 Box.prototype.setUser=function(value){ 10 user=value; 11 }; 12 })(); 13 var box=new Box('AAAA'); //第一次實體化 14 alert(box.getUser());//輸出AAAA 15 var box2=new Box('BBBB');//第二次實體化 16 alert(box.getUser());//輸出BBBB
單例物件
單例即只有一個實體化的物件，可以有兩種實作方式，
1. 通過字面量的方式實作，如下所示：
1 var box={ 2 user:'hex', 3 go:function(){ 4 return user+' is running....'; 5 } 6 }; 7 alert(box.go());
2. 通過匿名函式的自我執行回傳物件的方式實作，如下所示：
1 var box=function(){ 2 var user='Hex'; //私有變數 3 function run(){ //私有函式 4 return ' is running....'; 5 } 6 //回傳一個物件 7 var obj= { 8 //公共特權方法 9 going:function(){ 10 return user+run(); 11 } 12 } 13 return obj; 14 }(); 15 alert(box.going());
備注
望岳
作者：杜甫 (唐)
岱宗夫如何？齊魯青未了，造化鐘神秀，陰陽割昏曉，
蕩胸生曾云，決眥入歸鳥，
會當凌絕頂，一覽眾山小，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/143985.html
標籤：JavaScript