什么是閉包:
閉包是一個(gè)存在內(nèi)部函數(shù)的引用關(guān)系。
該引用指向的是外部函數(shù)的局部變量對(duì)象(前提是內(nèi)部函數(shù)使用了外部函數(shù)的局部變量)
閉包的作用：
延長(zhǎng)外部函數(shù)變量對(duì)象的生命周期
使用閉包能夠間接的從函數(shù)外部訪問(wèn)函數(shù)內(nèi)部的私有變量

一、常見(jiàn)的閉包

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è)全局的對(duì)象，其中包含著全局的屬性，并且將其放入全局上下文作用域鏈頂端，并且也將其放入每一個(gè)函數(shù)的作用域鏈頂端。以這個(gè)例子為例。如圖所示 

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

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

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

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

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

這個(gè)例子的解決方法如下所示，就是設(shè)置一個(gè)立即執(zhí)行函數(shù)，每一個(gè)下標(biāo)對(duì)應(yīng)的函數(shù)，都是立即執(zhí)行函數(shù)，當(dāng)立即執(zhí)行函數(shù)執(zhí)行時(shí)，每一個(gè)函數(shù)的上下文對(duì)象中都會(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

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容! 

最新評(píng)論