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的值所占的內存。

 總結

到此這篇關於js閉包和垃圾回收機制的文章就介紹到這瞭,更多相關js閉包和垃圾回收內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: