怎樣解析javascript的閉包

今天就跟大家聊聊有關(guān)怎樣解析javascript的閉包，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

什么是閉包:

閉包是一個(gè)存在內(nèi)部函數(shù)的引用關(guān)系。

該引用指向的是外部函數(shù)的局部變量對象(前提是內(nèi)部函數(shù)使用了外部函數(shù)的局部變量)

閉包的作用：

延長外部函數(shù)變量對象的生命周期

使用閉包能夠間接的從函數(shù)外部訪問函數(shù)內(nèi)部的私有變量

一、常見的閉包

function outer() {
  var a = 1
  function inner() {
    console.log(a)    //1
  }
  inner()
}
outer()

二、實(shí)例詳解

function createFunc() {
  var result = new Array()
  for (var i = 0; i < 10; i++) {
    result[i] = function () {
      console.log(i)
    }
  }
  return result
}
var result = createFunc()
result[0]() //10
result[1]() //10
result[2]() //10
result[3]() //10
result[4]() //10
result[5]() //10
result[6]() //10
result[7]() //10

首先在代碼執(zhí)行前，會(huì)先創(chuàng)建一個(gè)全局的對象，其中包含著全局的屬性，并且將其放入全局上下文作用域鏈頂端，并且也將其放入每一個(gè)函數(shù)的作用域鏈頂端。以這個(gè)例子為例。如圖所示 

在初始化結(jié)束后，開始執(zhí)行代碼，此時(shí)就會(huì)創(chuàng)建一個(gè)新的對象，叫做Active Object,其中放入一些參數(shù)，并且將其壓入createFunc函數(shù)的作用域鏈中。 

因?yàn)樵赾reateFunc中仍然定義函數(shù)result[i]..，所以在執(zhí)行代碼前，該函數(shù)會(huì)形成作用域鏈。 

此時(shí)開始執(zhí)行createFunc函數(shù)，當(dāng)指向完畢后，createFunc中的作用域鏈表現(xiàn)為。如下圖所示。此時(shí)result為一個(gè)數(shù)組。并且Active object已經(jīng)從createFunc作用域鏈的頂部刪除。 

此時(shí)開始執(zhí)行result[0]（這里以result[0]為例，其他的一樣)，此時(shí)執(zhí)行result[0]之前，應(yīng)該創(chuàng)建一個(gè)新的Active object對象，將其放入result[0]執(zhí)行作用域棧中。如圖所示

此時(shí)函數(shù)執(zhí)行中需要訪問i，但是在active object并不存在i，所以此時(shí)需要沿著作用域鏈進(jìn)行查找，在createFunc中找到i，并且i的值為10，所以最終打印的值都是10。在createFunc執(zhí)行完畢后，其創(chuàng)建的對象并沒有被垃圾回收掉，因?yàn)樵趓esult[0]中的i依然保持對該對象的引用。 

這個(gè)例子的解決方法如下所示，就是設(shè)置一個(gè)立即執(zhí)行函數(shù)，每一個(gè)下標(biāo)對應(yīng)的函數(shù)，都是立即執(zhí)行函數(shù)，當(dāng)立即執(zhí)行函數(shù)執(zhí)行時(shí)，每一個(gè)函數(shù)的上下文對象中都會(huì)存在為正確的下標(biāo)值。

function createFunc() {
  var result = new Array()
  for (var i = 0; i < 10; i++) {
    result[i] = (function (num) {
      return function() {
        console.log(num)
      }
    })(i)
  }
  return result
}
var result = createFunc()
result[0]() //0
result[1]() //1
result[2]() //2
result[3]() //3
result[4]() //4
result[5]() //5
result[6]() //6
result[7]() //7

JavaScript可以做什么

1.可以使網(wǎng)頁具有交互性，例如響應(yīng)用戶點(diǎn)擊，給用戶提供更好的體驗(yàn)。 2.可以處理表單，檢驗(yàn)用戶的輸入，并提供及時(shí)反饋節(jié)省用戶時(shí)間。 3.可以根據(jù)用戶的操作，動(dòng)態(tài)的創(chuàng)建頁面。 4使用JavaScript可以通過設(shè)置cookie存儲(chǔ)在瀏覽器上的一些臨時(shí)信息。

看完上述內(nèi)容，你們對怎樣解析javascript的閉包有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。