欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

讓我們一起來學習一下什么是javascript的閉包

 更新時間:2022年01月26日 17:09:03   作者:賣菜的小白  
這篇文章主要為大家詳細介紹了javascript的閉包,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
什么是閉包:
閉包是一個存在內部函數(shù)的引用關系。
該引用指向的是外部函數(shù)的局部變量對象(前提是內部函數(shù)使用了外部函數(shù)的局部變量)
閉包的作用:
延長外部函數(shù)變量對象的生命周期
使用閉包能夠間接的從函數(shù)外部訪問函數(shù)內部的私有變量

一、常見的閉包

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

二、實例詳解

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í)行前,會先創(chuàng)建一個全局的對象,其中包含著全局的屬性,并且將其放入全局上下文作用域鏈頂端,并且也將其放入每一個函數(shù)的作用域鏈頂端。以這個例子為例。如圖所示 

在這里插入圖片描述

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

在這里插入圖片描述

因為在createFunc中仍然定義函數(shù)result[i]..,所以在執(zhí)行代碼前,該函數(shù)會形成作用域鏈。 

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

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

這個例子的解決方法如下所示,就是設置一個立即執(zhí)行函數(shù),每一個下標對應的函數(shù),都是立即執(zhí)行函數(shù),當立即執(zhí)行函數(shù)執(zhí)行時,每一個函數(shù)的上下文對象中都會存在為正確的下標值。

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

總結

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內容! 

相關文章

最新評論