JavaScript 如何使用閉包

netScorpion 發(fā)布于2019-08-23 15:34 / 3028人閱讀

摘要：原因因?yàn)楹瘮?shù)創(chuàng)建的是一個(gè)可以訪問(wèn)其外部作用域的函數(shù)閉包，該作用域包含索引的循環(huán)。經(jīng)過(guò)秒后，的值已經(jīng)變?yōu)椤Ｕ_的寫(xiě)法寫(xiě)法一寫(xiě)法二

閉包基本上是內(nèi)部函數(shù)可以訪問(wèn)其范圍之外的變量，可用于實(shí)現(xiàn)隱私和創(chuàng)建函數(shù)工廠

定義一個(gè)數(shù)組，循環(huán)遍歷這個(gè)數(shù)組并在延遲3秒后打印每個(gè)元素的索引

先看一個(gè)不正確的寫(xiě)法：

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    alert("The index of this number is: " + i);
    console.log("The index of this number is: " + i);
  }, 3000);
}

看下執(zhí)行效果：

如上圖：3秒后每次都是打印4，而不是0，1，2，3。

原因：因?yàn)?b>setTimeout函數(shù)創(chuàng)建的是一個(gè)可以訪問(wèn)其外部作用域的函數(shù)（閉包），該作用域包含索引i的循環(huán)。經(jīng)過(guò)3秒后，i的值已經(jīng)變?yōu)?strong>4。

正確的寫(xiě)法：
寫(xiě)法一：

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function(i_local){
    return function () {
      alert("The index of this number is: " + i_local);
      console.log("The index of this number is: " + i_local);
    }
  }(i), 3000)
}

寫(xiě)法二：

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    alert("The index of this number is: " + i);
    console.log("The index of this number is: " + i);
  }, 3000);
}

GPU云服務(wù)器云服務(wù)器 javascript閉包如何使用javascript javascript如何使用 javascript閉包詳解

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/102248.html

相關(guān)文章

面試官問(wèn)我：什么是JavaScript閉包，我該如何回答

摘要：到底什么是閉包這個(gè)問(wèn)題在面試是時(shí)候經(jīng)常都會(huì)被問(wèn)，很多小白一聽(tīng)就懵逼了，不知道如何回答好。上面這么說(shuō)閉包是一種特殊的對(duì)象。閉包的注意事項(xiàng)通常，函數(shù)的作用域及其所有變量都會(huì)在函數(shù)執(zhí)行結(jié)束后被銷毀。從而使用閉包模塊化代碼，減少全局變量的污染。閉包，有人說(shuō)它是一種設(shè)計(jì)理念，有人說(shuō)所有的函數(shù)都是閉包。到底什么是閉包？這個(gè)問(wèn)題在面試是時(shí)候經(jīng)常都會(huì)被問(wèn)，很多小白一聽(tīng)就懵逼了，不知道如何回答好。這個(gè)...

BenCHou 2019-08-23 15:19 評(píng)論0 收藏0
Javascript閉包入門(mén)(譯文)

摘要：也許最好的理解是閉包總是在進(jìn)入某個(gè)函數(shù)的時(shí)候被創(chuàng)建，而局部變量是被加入到這個(gè)閉包中。在函數(shù)內(nèi)部的函數(shù)的內(nèi)部聲明函數(shù)是可以的可以獲得不止一個(gè)層級(jí)的閉包。前言總括：這篇文章使用有效的javascript代碼向程序員們解釋了閉包，大牛和功能型程序員請(qǐng)自行忽略。譯者：文章寫(xiě)在2006年，可直到翻譯的21小時(shí)之前作者還在完善這篇文章，在Stackoverflow的How do Java...

Fourierr 2019-08-20 13:56 評(píng)論0 收藏0
JavaScript閉包，只學(xué)這篇就夠了

摘要：當(dāng)在中調(diào)用匿名函數(shù)時(shí)，它們用的都是同一個(gè)閉包，而且在這個(gè)閉包中使用了和的當(dāng)前值的值為因?yàn)檠h(huán)已經(jīng)結(jié)束，的值為。最好將閉包當(dāng)作是一個(gè)函數(shù)的入口創(chuàng)建的，而局部變量是被添加進(jìn)這個(gè)閉包的。閉包不是魔法這篇文章使用一些簡(jiǎn)單的代碼例子來(lái)解釋JavaScript閉包的概念，即使新手也可以輕松參透閉包的含義。其實(shí)只要理解了核心概念，閉包并不是那么的難于理解。但是，網(wǎng)上充斥了太多學(xué)術(shù)性的文章，對(duì)于...

CoderBear 2019-08-21 11:56 評(píng)論0 收藏0
進(jìn)擊JavaScript之（三）玩轉(zhuǎn)閉包

摘要：為了更好的理解，在閱讀此文之前建議先閱讀上一篇進(jìn)擊之詞法作用域與作用域鏈?zhǔn)裁词情]包閉包的含義就是閉合，包起來(lái)，簡(jiǎn)單的來(lái)說(shuō)，就是一個(gè)具有封閉功能與包裹功能的結(jié)構(gòu)。在中函數(shù)構(gòu)成閉包。為了更好的理解，在閱讀此文之前建議先閱讀上一篇《進(jìn)擊JavaScript之詞法作用域與作用域鏈》 1.什么是閉包閉包的含義就是閉合，包起來(lái)，簡(jiǎn)單的來(lái)說(shuō)，就是一個(gè)具有封閉功能與包裹功能的結(jié)構(gòu)。所謂的閉包就是...

cyixlq 2019-08-20 10:30 評(píng)論0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件開(kāi)發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開(kāi)發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。插....

izhuhaodev 2019-08-21 11:44 評(píng)論0 收藏0
前端基礎(chǔ)進(jìn)階（四）：詳細(xì)圖解作用域鏈與閉包

摘要：之前一篇文章我們?cè)敿?xì)說(shuō)明了變量對(duì)象，而這里，我們將詳細(xì)說(shuō)明作用域鏈。而的作用域鏈，則同時(shí)包含了這三個(gè)變量對(duì)象，所以的執(zhí)行上下文可如下表示。下圖展示了閉包的作用域鏈。其中為當(dāng)前的函數(shù)調(diào)用棧，為當(dāng)前正在被執(zhí)行的函數(shù)的作用域鏈，為當(dāng)前的局部變量。 showImg(https://segmentfault.com/img/remote/1460000008329355);初學(xué)JavaScrip...

aikin 2019-08-21 18:29 評(píng)論0 收藏0