js--閉包與垃圾回收機制

前言

　　閉包和垃圾回收機制常常作為前端學習開發中的難點，也經常在面試中遇到這樣的問題，本文記錄一下在學習工作中關於這方面的筆記。

正文

　1.閉包

　　閉包（closure）是Javascript語言的一個難點，也是它的特色，很多高級應用都要依靠閉包實現。作為一個JavaScript開發者，理解閉包十分重要。

　　1.1閉包是什么？

　　閉包就是一個函數引用另一個函數的變量，內部函數被返回到外部並保存時產生，（內部函數的作用域鏈AO使用了外層函數的AO）

       因為變量被引用着所以不會被回收，因此可以用來封裝一個私有變量，但是 不必要的閉包只會增加內存消耗。

　　閉包是一種保護私有變量的機制，在函數執行時形成私有的作用域，保護里面的私有變量不受外界干擾。或者說閉包就是子函數可以使用父函數的局部變量，還有父函數的參數。

　　1.2閉包的特性

　　 ①函數嵌套函數

　　②函數內部可以引用函數外部的參數和變量

　　③參數和變量不會被垃圾回收機制回收

　　1.3理解閉包

　　基於我們所熟悉的作用域鏈相關知識，我們來看下關於計數器的問題，如何實現一個函數，每次調用該函數時候計數器加一。

    var counter=0;
    function demo3(){
        console.log(counter+=1);       
    }
    demo3();//1
    demo3();//2
    var counter=5;
    demo3();  //6

　　上面的方法，如果在任何一個地方改變counter的值 計數器都會失效，javascript解決這種問題用到閉包，就是函數內部內嵌函數,再來看下利用閉包如何實現。

     function add() {
            var counter = 0;
            return function plus() {
                counter += 1;
                return counter
            }      
        }
        var count=add()
        console.log(count())//1
        var counter=100
        console.log(count())//2

　　上面就是一個閉包使用的實例 ，函數add內部內嵌一個plus函數，count變量引用該返回的函數，每次外部函數add執行的時候都會開辟一塊內存空間，外部函數的地址不同，都會重新創建一個新的地址，把plus函數嵌套在add函數內部，這樣就產生了counter這個局部變量，內次調用count函數，該局部變量值加一，從而實現了真正的計數器問題。

　　1.4閉包的主要實現形式

　　這里主要通過兩種形式來學習閉包：

　　①函數作為返回值，也就是上面的例子中用到的。

        function showName(){
                var name="xiaoming"
                return function(){
                    return name
                }
            }
            var name1=showName()
            console.log(name1())    

　　閉包就是能夠讀取其他函數內部變量的函數。閉包就是將函數內部和函數外部連接起來的一座橋梁。

　　②函數作為參數傳遞

 　　　　　　 var num = 15

            var foo = function(x){

                if(x>num){

                    console.log(x)

                }  

            }

            function foo2(fnc){

                var num=30

                fnc(25)

            }

            foo2(foo)//25

上面這段代碼中，函數foo作為參數傳入到函數foo2中，在執行foo2的時候，25作為參數傳入foo中，這時判斷的x>num的num取值是創建函數的作用域中的num,即全局的num,而不是foo2內部的num,因此打印出了25。

　　1.5閉包的優缺點

　　優點：

　　①保護函數內的變量安全 ，實現封裝，防止變量流入其他環境發生命名沖突

　　②在內存中維持一個變量，可以做緩存（但使用多了同時也是一項缺點，消耗內存）

　　③匿名自執行函數可以減少內存消耗

　　缺點：

　　①其中一點上面已經有體現了，就是被引用的私有變量不能被銷毀，增大了內存消耗，造成內存泄漏，解決方法是可以在使用完變量后手動為它賦值為null；

　　②其次由於閉包涉及跨域訪問，所以會導致性能損失，我們可以通過把跨作用域變量存儲在局部變量中，然后直接訪問局部變量，來減輕對執行速度的影響。

　　1.6閉包的使用

　　for (var i = 0; i < 5; i++) {
   　　 setTimeout(function() {
      　　  console.log( i);
    　　}, 1000);
　　}

　　console.log(i);

　　我們來看上面的問題，這是一道很常見的題，可這道題會輸出什么，一般人都知道輸出結果是 5,5,5,5,5,5，你仔細觀察可能會發現這道題還有很多巧妙之處，這6個5的輸出順序具體是怎樣的？5 -> 5,5,5,5,5 ，了解同步異步的人也不難理解這種情況，基於上面的問題，接下來思考如何實現5 -> 0,1,2,3,4這樣的順序輸出呢？

    for (var i = 0; i < 5; i++) {
        (function(j) {  // j = i
            setTimeout(function() {
                console.log( j);
            }, 1000);
        })(i);
    }
    console.log( i);
//5 -> 0,1,2,3,4    

　　這樣在for循環種加入匿名函數，匿名函數入參是每次的i的值，在同步函數輸出5的一秒之后，繼續輸出01234。

    for (var i = 0; i < 5; i++) {
        setTimeout(function(j) {
            console.log(j);
        }, 1000, i);
    }
    console.log( i);
    //5 -> 0,1,2,3,4

　　仔細查看setTimeout的api你會發現它還有第三個參數，這樣就省去了通過匿名函數傳入i的問題。

　　var output = function (i) {
   　　 setTimeout(function() {
      　　  console.log(i);
    　　}, 1000);
　　};

　　for (var i = 0; i < 5; i++) {
   　　 output(i);  // 這里傳過去的 i 值被復制了
　　}

　　console.log(i);
　　//5 -> 0,1,2,3,4

　　這里就是利用閉包將函數表達式作為參數傳遞到for循環中，同樣實現了上述效果。

　　for (let i = 0; i < 5; i++) {

   　　 setTimeout(function() {

      　　  console.log(new Date, i);

    　　}, 1000);

　　}

　　console.log(new Date, i);

　　//5 -> 0,1,2,3,4

　　知道let塊級作用域的人會想到上面的方法。但是如果要實現0 -> 1 -> 2 -> 3 -> 4 -> 5這樣的效果呢。

　　for (var i = 0; i < 5; i++) {
   　　 (function(j) {
      　　  setTimeout(function() {
         　　   console.log(new Date, j);
        　　}, 1000 * j);  // 這里修改 0~4 的定時器時間
    　　})(i);
　　}

　　setTimeout(function() { // 這里增加定時器，超時設置為 5 秒
   　　 console.log(new Date, i);
　　}, 1000 * i);
　　//0 -> 1 -> 2 -> 3 -> 4 -> 5

　　還有下面的代碼，通過promise來實現。

　　const tasks = [];
　　for (var i = 0; i < 5; i++) {   // 這里 i 的聲明不能改成 let，如果要改該怎么做？
   　　 ((j) => {
      　　  tasks.push(new Promise((resolve) => {
         　　   setTimeout(() => {
            　　    console.log(new Date, j);
               　　 resolve();  // 這里一定要 resolve，否則代碼不會按預期 work
            　　}, 1000 * j);   // 定時器的超時時間逐步增加
        　　}));
    　　})(i);
　　}

　　Promise.all(tasks).then(() => {
   　　 setTimeout(() => {
      　　  console.log(new Date, i);
    　　}, 1000);   // 注意這里只需要把超時設置為 1 秒
　　});
　　//0 -> 1 -> 2 -> 3 -> 4 -> 5

　　const tasks = []; // 這里存放異步操作的 Promise
　　const output = (i) => new Promise((resolve) => {
   　　 setTimeout(() => {
      　　  console.log(new Date, i);
        　　resolve();
    　　}, 1000 * i);
　　});

　　// 生成全部的異步操作
　　for (var i = 0; i < 5; i++) {
  　　  tasks.push(output(i));
　　}

　　// 異步操作完成之后，輸出最后的 i
　　Promise.all(tasks).then(() => {
   　　 setTimeout(() => {
      　　  console.log(new Date, i);
    　　}, 1000);
　　});
　　//0 -> 1 -> 2 -> 3 -> 4 -> 5

// 模擬其他語言中的 sleep，實際上可以是任何異步操作
const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(async () => {  // 聲明即執行的 async 函數表達式
    for (var i = 0; i < 5; i++) {
        if (i > 0) {
            await sleep(1000);
        }
        console.log(new Date, i);
    }

    await sleep(1000);
    console.log(new Date, i);
})();
//0 -> 1 -> 2 -> 3 -> 4 -> 5

　　上面的代碼中都用到了閉包，總之，閉包找到的是同一地址中父級函數中對應變量最終的值。

　 2.垃圾回收機制

 

　　JavaScript 中的內存管理是自動執行的，而且是不可見的。我們創建基本類型、對象、函數……所有這些都需要內存。

　　通常用采用的垃圾回收有兩種方法：標記清除、引用計數。

　　1、標記清除

　　垃圾收集器在運行的時候會給存儲在內存中的所有變量都加上標記。然后，它會去掉環境中的變量以及被環境中的變量引用的標記。

　　而在此之后再被加上標記的變量將被視為准備刪除的變量，原因是環境中的變量已經無法訪問到這些變量了。

　　最后。垃圾收集器完成內存清除工作，銷毀那些帶標記的值，並回收他們所占用的內存空間

　　2.引用計數

　　引用計數的含義是跟蹤記錄每個值被引用的次數。當聲明了一個變量並將一個引用類型賦值給該變量時，則這個值的引用次數就是1。

　　相反，如果包含對這個值引用的變量又取得了另外一個值，則這個值的引用次數就減1。當這個引用次數變成0時，

　　則說明沒有辦法再訪問這個值了，因而就可以將其所占的內存空間給收回來。這樣，垃圾收集器下次再運行時，

　　它就會釋放那些引用次數為0的值所占的內存。

 

總結

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。