JS閉包原理及其使用場(chǎng)景解析

更新時(shí)間：2020年12月03日 09:31:07 作者：愛折騰的王先生

這篇文章主要介紹了JS閉包原理及其使用場(chǎng)景解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

閉包定義

可以通過內(nèi)層函數(shù)訪問外層函數(shù)的作用域的組合叫做閉包。

閉包使用場(chǎng)景

使用閉包來(lái)實(shí)現(xiàn)防抖

function debounce(callback, time) {
  var timer;
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      callback()
    }, time)
  }
}<br data-filtered="filtered"><br data-filtered="filtered">window.onresize = debounce(() => {console.log(666)},500)

使用閉包設(shè)計(jì)單例模式

class Car{
  constructor(color){
    this.color = color
  }
}
var proxy = (function createCar() {
  var instance;
  return function (color) {
    if (!instance) {
      instance = new Car(color)
    }
    return instance
  }
})()
var car = proxy('white')

使用閉包遍歷取索引值（古老的問題）

for (var i = 0; i < 10; i++) {
  setTimeout(function(){console.log(i)},0) //10個(gè)10
}
for (var i = 0; i < 10; i++) {
  (function(j){
    setTimeout(function(){console.log(j)},0) // 0 - 9
  })(i)
}

閉包性能

因?yàn)殚]包會(huì)使外層函數(shù)作用域中的變量被保存在內(nèi)存中不被回收，所以如果濫用閉包就會(huì)導(dǎo)致性能問題，謹(jǐn)記。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JS
閉包

相關(guān)文章

js輸出數(shù)據(jù)精確到小數(shù)點(diǎn)后n位代碼
要保留小數(shù)點(diǎn)后N位的問題，經(jīng)過一番思索，終于解決了，這篇文章主要介紹了js輸出數(shù)據(jù)精確到小數(shù)點(diǎn)后n位代碼，感興趣的朋友可以參考一下
2016-07-07
JS尾遞歸的實(shí)現(xiàn)方法及代碼優(yōu)化技巧
這篇文章主要介紹了JS尾遞歸的實(shí)現(xiàn)方法及代碼優(yōu)化技巧,結(jié)合實(shí)例形式分析了尾遞歸的原理、JS實(shí)現(xiàn)方法及優(yōu)化技巧,需要的朋友可以參考下
2019-01-01
騰訊的ip接口方便獲取當(dāng)前用戶的ip地理位置
在論壇中閑逛，無(wú)意中發(fā)現(xiàn)騰訊的ip接口。還是挺有意思的。大家可以利用下，這個(gè)IP接口所查詢到的還是比較準(zhǔn)確，我發(fā)給幾個(gè)朋友測(cè)試了一下都是正確的，畢竟是騰訊的東西。
2010-11-11
Flutter實(shí)現(xiàn)仿微信底部菜單欄功能
這篇文章主要介紹了Flutter實(shí)現(xiàn)仿微信底部菜單欄,需要的朋友可以參考下
2019-09-09
JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合實(shí)例形式分析了使用indexOf()方法進(jìn)行數(shù)組的判斷與去重相關(guān)原理與具體操作技巧,需要的朋友可以參考下
2018-09-09
js的alert彈出框出現(xiàn)亂碼解決方案
alert彈出框出現(xiàn)亂碼的情況，想必大家都有遇到過吧，其實(shí)解決方法很簡(jiǎn)單設(shè)置charset=utf-8在試試，看看是不是好了
2013-09-09
JavaScript-定時(shí)器0~9抽獎(jiǎng)系統(tǒng)詳解（代碼）
這篇文章主要介紹了 JavaScript-定時(shí)器0~9抽獎(jiǎng)系統(tǒng)，通過代碼實(shí)例說(shuō)明函數(shù)調(diào)用的整體操作，具體步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。
2017-08-08
JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式,本文同時(shí)講解了設(shè)計(jì)模式的類別如創(chuàng)建型設(shè)計(jì)模式、結(jié)構(gòu)型設(shè)計(jì)模式、行為設(shè)計(jì)模式等內(nèi)容,需要的朋友可以參考下
2015-02-02
JavaScript this關(guān)鍵字指向常用情況解析
這篇文章主要介紹了JavaScript this關(guān)鍵字指向常用情況解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
完美解決IE9瀏覽器出現(xiàn)的對(duì)象未定義問題
下面小編就為大家?guī)?lái)一篇完美解決IE9瀏覽器出現(xiàn)的對(duì)象未定義問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧，祝大家游戲愉快哦
2016-09-09