JavaScript 閉包技巧

什么是閉包?

MDN:“閉包是捆綁在一起(封閉)的函數及其周圍狀態(詞法環境)的引用的組合。換句話說,閉包使您可以從內部函數訪問外部函數的作用域。在 JavaScript 中,每次創建函數時都會創建閉包。”

比如說

const getShowName = () => {const name = "fatfish" // name是由getShowName創建的局部變量return () => {console.log(name) // 使用父函數中聲明的變量}
}const showName = getShowName()showName() // fatfish

作為一名前端開發,閉包在很多場景中都會用到,功能確實有點牛!!

場景使用

1.解決循環問題


for (var i = 0; i < 3; i++) {setTimeout(() => {console.log(i) // 我要打印什么?}, 1000 * i)
}

?我們怎樣才能讓它打印0、1、2呢?這個問題我們就可以使用閉包來解決


for (var i = 0; i < 3; i++) {((n) => {setTimeout(() => {console.log(n) // 我該打印啥?}, 1000 * n)})(i)
}

當然,我們還有另一種更簡單的方法,只需將var替換為let即可解決這個問題。


for (let i = 0; i < 3; i++) {setTimeout(() => {console.log(i) // 打印啥?}, 1000 * i)
}

2.記憶功能

利用閉包的特性,我們可以減少計算量,提高我們編寫的程序的性能。

const memoize = (callback) => {const cache = new Map()return function (n) {if (cache.has(n)) { // 當它已經存在于緩存中時,結果將直接返回,我們不需要再次計算return cache.get(n)} else {const res = callback.call(this, n)cache.set(n, res) // 第一次計算后,結果將被緩存return res}}
}
const fibonacci = memoize(function fib (n) {if (n === 1) {return 1}if (n === 2 || n === 3) {return 2}return fib(n - 1) + fib(n - 2)
})console.log(fibonacci(1)) // 1
console.log(fibonacci(10)) // 68
console.log(fibonacci(10)) // 68 從緩存中拿到

3.封裝私有變量和屬性?

很早以前,我們經常通過閉包來實現對私有變量的保護。我們只能通過getName和setName來獲取和設置_name的值。這樣我們就可以有效防止_name被惡意修改。

const createName = (name) => {let _name = namereturn {getName () {return _name},setName (name) {_name = name}}
}
const p = createName('fatfish')
p.getName() // fatfish
p.setName('medium')
p.getName() // medium

4.函數柯里化?

什么是函數柯里化?

baidu:在計算機科學中,柯里化(Currying)是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數,并且返回接受余下的參數且返回結果的新函數的技術。

const curry = (callback, ...args) => {return function (...innerArgs) {innerArgs = args.concat(innerArgs)if (innerArgs.length >= callback.length) {return callback.apply(this, innerArgs)} else {return curry(callback, innerArgs)}}
}const add = curry((a, b, c) => {return a + b + c
}, 1)
console.log(add(2, 3)) // 6

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/166634.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/166634.shtml
英文地址,請注明出處:http://en.pswp.cn/news/166634.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

css引入的三種方式

css引入的三種方式 一、內聯樣式二、外部樣式表三、 內部樣式表總結trouble 一、內聯樣式 內聯樣式也被稱為行內樣式。它是將 CSS 樣式直接應用于 HTML 元素的 style 屬性中的一種方式 <p style"color: blue; font-size: 16px;">這是一個帶有內聯樣式的段落。&…

Modbus RTU轉Profinet網關連接PLC與變頻器通訊在機床上應用案例

背景&#xff1a;以前在機床加工車間里&#xff0c;工人們忙碌地操作著各種機床設備。為了使整個生產過程更加高效、流暢&#xff0c;進行智能化改造。 方案&#xff1a;在機床上&#xff0c;PLC通過Modbus RTU轉Profinet網關連接變頻器進行通訊&#xff1a;PLC作為整個生產線…

實現簡單的操作服務器和客戶端(下)

一、說明 描述:本教程介紹如何使用 simple_action_client 庫創建斐波那契操作客戶端。此示例程序創建一個操作客戶端并將目標發送到操作服務器。 內容 代碼代碼解釋編譯運行操作客戶端連接服務器和客戶端二、代碼 首先,在您喜歡的編輯器中創建actionlib_tutorials/src/fib…

【封裝UI組件庫系列】封裝Icon圖標組件

封裝UI組件庫系列第三篇封裝Icon圖標組件 &#x1f31f;前言 &#x1f31f;封裝Icon 1.創建Icon組件 2.引用svg圖標庫 第一步 第二步 第三步 3.二次封裝 4.封裝自定義屬性 &#x1f31f;總結 &#x1f31f;前言 在前端開發中&#xff0c;大家可能已經用過各種各樣的UI組…

VUE項目部署過程中遇到的錯誤:POST http://124.60.11.183:9090/test/login 405 (Not Allowed)

我當初報了這個405錯誤&#xff0c;再網上查了半天&#xff0c;他們都說什么是nginx部署不支持post訪問靜態資源。 但后面我發現我是因為另一個原因才導致的無法訪問。 我再vue中有使用devServer:{ proxy:{} }進行路由轉發。 但是&#xff01;&#xff01; 在這個配置只…

接口測試學習路線

接口測試分為兩種&#xff1a; 測試外部接口&#xff1a;系統和外部系統之間的接口 如&#xff1a;電商網站&#xff1a;支付寶支付 測試內部接口&#xff1a;系統內部的模塊之間的聯調&#xff0c;或者子系統之間的數據交互 測試重點&#xff1a;測試接口參數傳遞的正確性&…

node與 pnpm、node-sass 等工具的版本兼容關系

1. node & pnpm 2. node & node-sass 3. node-sass & sass-loader sass-loader依賴于node-sass&#xff0c;以下是部分版本號對應

Zookeeper 集群中是怎樣選舉leader的

zookeeper集群中服務器被劃分為以下四種狀態&#xff1a; LOOKING&#xff1a;尋找Leader狀態。處于該狀態的服務器會認為集群中沒有Leader&#xff0c;需要進行Leader選舉&#xff1b;FOLLOWING&#xff1a;跟隨著狀態&#xff0c;說明當前服務器角色為Follower&#xff1b;LE…

Jmeter基礎和概念

JMeter 介紹&#xff1a; 一個非常優秀的開源的性能測試工具。 優點&#xff1a;你用著用著就會發現它的重多優點&#xff0c;當然不足點也會呈現出來。 從性能工具的原理劃分&#xff1a; Jmeter工具和其他性能工具在原理上完全一致&#xff0c;工具包含4個部分&#xff1a; …

綠色能源守護者:光伏運維無人機

隨著我國太陽能光伏產業被納入戰略性新興產業&#xff0c;光伏發電成為實現“雙碳”目標的關鍵之一。在政策支持下&#xff0c;光伏產業維持高速發展&#xff0c;為迎接“碳達峰、碳中和”大勢注入了強大動力。在這一背景下&#xff0c;復亞智能與安徽一家光伏企業合作&#xf…

LeetCode78. Subsets

文章目錄 一、題目二、題解 一、題目 Given an integer array nums of unique elements, return all possible subsets (the power set). The solution set must not contain duplicate subsets. Return the solution in any order. Example 1: Input: nums [1,2,3] Outpu…

size和shape的區別與聯系

對于Numpy數據類型 shape和size都是屬于Numpy的屬性 arr.shape 將返回一個包含兩個元素的元組&#xff0c;例如 (m, n)&#xff0c;其中 m 表示數組的行數&#xff0c;n 表示數組的列數。arr.size 將返回數組中元素的總數。 舉例: 輸入&#xff1a; import numpy as np# 創…

JavaScript之DOM操作

第一章 API介紹 ?API是一種事先定義好的函數&#xff0c;用來提供應用程序與開發人員基于某軟件或硬件得以訪問的一組例程&#xff0c;而又無需訪問源碼&#xff0c;或理解內部工作機制的細節。 ?Web API接口&#xff1a;瀏覽器提供的一系列操作瀏覽器功能和頁面元素的API(BO…

【Linux】Linux的常用基本指令

Linux常用基本指令 Linux指令的歷史背景前言說明一、 ls 列出文件中的所有內容常用選項 二、pwd 顯示當前所在目錄進程三、cd 將當前工作目錄改變到指定的目錄下常用樣例 四、touch 1. 更改文檔或目錄的日期時間 2. 新建一個不存在的文件常用選項 四、mkdir 1. 更改文檔或目錄的…

牛客劍指offer刷題回溯篇

文章目錄 矩陣中的路徑題目思路代碼實現 機器人的運動范圍題目思路代碼實現 矩陣中的路徑 題目 請設計一個函數&#xff0c;用來判斷在一個n乘m的矩陣中是否存在一條包含某長度為len的字符串所有字符的路徑。路徑可以從矩陣中的任意一個格子開始&#xff0c;每一步可以在矩陣…

TensorFlow實戰教程(二十五)-基于BiLSTM-CRF的醫學命名實體識別研究(下)模型構建

這篇文章寫得很冗余,但是我相信你如果真的看完,并且按照我的代碼和邏輯進行分析,對您以后的數據預處理和命名實體識別都有幫助,只有真正對這些復雜的文本進行NLP處理后,您才能適應更多的真實環境,堅持!畢竟我寫的時候也看了20多小時的視頻,又寫了20多個小時,別抱怨,加…

JS按順序逐個發送 請求

1.使用Promise鏈 當需要按順序逐個發送 POST 請求時&#xff0c;可以使用 Axios 庫的 Promise 鏈來實現。在每個 POST 請求成功后&#xff0c;可以觸發下一個請求。這里有一個簡單的示例&#xff1a; 首先&#xff0c;確保已經在 HTML 文件中引入了 Axios 庫&#xff1a; &l…

控制反轉(IoC)是什么?

文章目錄 控制反轉&#xff08;Inversion of Control&#xff0c;IoC&#xff09;傳統的程序設計中&#xff1a;應用程序控制程序流程控制反轉設計中&#xff1a;由框架或容器控制程序流程IoC 的作用 舉例生活例子軟件工程例子 控制反轉&#xff08;Inversion of Control&#…

組合不重復的3位數

編程要求 給出四個不同的數字&#xff0c;能夠組成多少個不重復的3位數&#xff0c;按照從小到大的順序輸出&#xff0c;每行一個。 測試用例 測試輸入 1 2 3 4 測試輸出 123 124 132 134 142 143 213 214 231 234 241 243 312 314 321 324 341 342 412 413 421 423 431 …

算法:給出指定整數區間、期望值,得到最終結果

1&#xff0c;問題&#xff1a; 在游戲中&#xff0c;我們經常會遇到以下情況&#xff1a;打開寶箱&#xff0c;獲得x個卡牌碎片。 但通常策劃只會給一個既定的數值空間&#xff0c;和一個期望得到的值&#xff0c;然后讓我們去隨機。比如&#xff1a; 問題A&#xff1a;在1~…