js-閉包

whidy 發(fā)布于2019-08-23 18:20 / 3077人閱讀

摘要：一閉包的概念閉包官方給出的解釋閉包是函數(shù)和聲明該函數(shù)的詞法環(huán)境的組合。解決此類情況的方式使用立即執(zhí)行函數(shù)使用中的這兩種方式的共性就是把變量變成了每個(gè)函數(shù)的局部變量，因此在執(zhí)行閉包的時(shí)候，局部變量不會(huì)發(fā)生變化。

一、閉包的概念

閉包官方給出的解釋：閉包是函數(shù)和聲明該函數(shù)的詞法環(huán)境的組合。

下面我們舉一個(gè)經(jīng)典的且最簡單的閉包demo

function closure(){
     var a=4;
     function clo(){
         console.log(a)
     }
     clo(); 
 }
 closure();

從上面的例子中，我們可以看出閉包需要的三基本個(gè)條件是：1.一個(gè)外層函數(shù)。2.一個(gè)內(nèi)部函數(shù)。3.局部變量。

二、閉包的用途

要理解閉包的用途首先要理解javascript的特殊的變量作用域。

變量的作用域只有兩種：全部變量和局部變量。而javascript語言中，函數(shù)內(nèi)部可以直接讀取全局變量，但是函數(shù)外部無法讀取函數(shù)內(nèi)部的局部變量。

而我們需要用到的閉包的場景就是：我們需要一個(gè)外部不可以直接訪問一個(gè)函數(shù)內(nèi)部變量的的環(huán)境。因此，通常你使用只有一個(gè)方法的對(duì)象的地方，都可以使用閉包。比如：插件封裝，面向?qū)ο缶幊痰取?/p>

閉包很有用，因?yàn)樗试S將函數(shù)與其所操作的某些數(shù)據(jù)（環(huán)境）關(guān)聯(lián)起來。這顯然類似于面向?qū)ο缶幊獭Ｔ诿嫦驅(qū)ο缶幊讨校瑢?duì)象允許我們將某些數(shù)據(jù)（對(duì)象的屬性）與一個(gè)或者多個(gè)方法相關(guān)聯(lián)。

1.DOM中使用閉包實(shí)例

12
14
16


function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + "px";
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);


document.getElementById("size-12").onclick = size12;
document.getElementById("size-14").onclick = size14;
document.getElementById("size-16").onclick = size16;

2.用閉包模擬私有變量

 function closure2(){
    var pCounter=0;
    function changeBy(val){
      pCounter += val;
    }
    return{
        add:function(){
            changeBy(1)
        },
        reduce:function(){
            changeBy(-1)
        },
        value:function(){
           return pCounter
        }
    }
 }
 var counter1= closure2();
 var counter2 = closure2();
 console.log(Counter1.value());
 Counter1.add();
 Counter1.add();
 console.log(Counter1.value()); /* logs 2 */
 Counter1.reduce();
 console.log(Counter1.value()); /* logs 1 */
 console.log(Counter2.value()); /* logs 0 */

每次調(diào)用其中一個(gè)計(jì)數(shù)器時(shí)，通過改變這個(gè)變量的值，會(huì)改變這個(gè)閉包的詞法環(huán)境。然而在一個(gè)閉包內(nèi)對(duì)變量的修改，不會(huì)影響到另外一個(gè)閉包中的變量。

三、閉包的缺點(diǎn)

1.缺點(diǎn)一：變量發(fā)生變化

   function arr(){
           var res=new Array();
           for (var i = 0; i< 10; i++){
              res[i]=function(){
                  console.log(i);
              }
           }
           return res;
       }
      var arr1=arr();
      arr1[0]();//10
      arr1[1]();//10

因?yàn)殚]包里面的函數(shù)調(diào)用發(fā)生在for循環(huán)結(jié)束之后,此時(shí)變量i的值是10，且res組成的閉包集合共用一個(gè)詞法環(huán)境里面的變量i，因此每個(gè)閉包所輸出的值都是10。

解決此類情況的方式：
a.使用立即執(zhí)行函數(shù)

   function arr(){
        var res=new Array();
        for (var i = 0; i< 10; i++){
            res[i]=(function (num) {
                return function(){
                    console.log(num)
                }
            })(i)
        }
        return res;
      }
      var arr1=arr();
      arr1[0]();//0
      arr1[1]();//1

b.使用es6中的let

function arr(){
     var res=new Array();
     for (let i = 0; i< 10; i++){
        res[i]=function () {
                console.log(i)
        }
     }
     return res;   
   } 
   var arr1=arr();   
   arr1[0]();//0   
   arr1[1]();//1

這兩種方式的共性就是把變量i,變成了每個(gè)函數(shù)的局部變量，因此在執(zhí)行閉包的時(shí)候，局部變量i不會(huì)發(fā)生變化。

2.缺點(diǎn)二：this指向問題

   var obj = {
     name:"this",
      getName:function() {
         return function () {
             console.log(this.name)
         }
     }  
   }  
   var arr= obj.getName();  
   arr()//undefined

this指向當(dāng)前調(diào)用函數(shù)的上下文，arr函數(shù)創(chuàng)建在全局環(huán)境中，所以在調(diào)用arr時(shí)，在非嚴(yán)格模式的瀏覽器環(huán)境中this指向window，在嚴(yán)格模式下this是undefined，而這兩種情況下都沒有一個(gè)全局的name,所以函數(shù)的執(zhí)行結(jié)果為undefined。

3.缺點(diǎn)三：內(nèi)存泄漏

function  showId() {
    var el = document.getElementById("div1")
    el.onclick = function(){
      console.log(el.id)   // 這樣會(huì)導(dǎo)致閉包引用外層的el，當(dāng)執(zhí)行完showId后，el無法釋放
    }
}


// 改成下面
function  showId() {
    var el = document.getElementById("app")
    var id  = el.id
    el.onclick = function(){
      console.log(id)   // 這樣會(huì)導(dǎo)致閉包引用外層的el，當(dāng)執(zhí)行完showId后，el無法釋放
    }
    el = null    // 主動(dòng)釋放el
}

當(dāng)閉包中引用了全局變量時(shí)，記得在引用完之后進(jìn)行釋放，避免造成內(nèi)存泄漏。