JavaScript閉包詳解
1.什么是閉包?
函數(shù)本身和該函數(shù)聲明時(shí)所處的環(huán)境狀態(tài)的組合。
1.2 閉包的記憶性:函數(shù)能夠記住定義時(shí)所處的環(huán)境
1.3 閉包現(xiàn)象:JS中每次創(chuàng)建函數(shù)時(shí)都會(huì)創(chuàng)建閉包
2.閉包的功能:記憶性、模擬私有變量
2.1 記憶性
舉例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function createCheckTemp(standardTemp){ function checkTemp(n){ if(n<=standardTemp){ alert('你的體溫正常'); }else{ alert('你的體溫偏高'); } } return checkTemp; } var checkTemp_A=createCheckTemp(37.1); var checkTemp_B=createCheckTemp(37.3); checkTemp_A(37.2); checkTemp_A(37.0); checkTemp_B(37.2); checkTemp_B(37.0); </script> </body> </html>
細(xì)節(jié):
1:閉包的記憶性
2:函數(shù)return checkTemp,是一個(gè)函數(shù)名
3:定義var checkTemp_A和checkTemp_A來獲取函數(shù)名checkTemp,而不是直接調(diào)用
2.2 模擬私有變量(安全化變量)
閉包代碼舉例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 封裝一個(gè)函數(shù),這個(gè)函數(shù)的功能就是私有化變量 function fun(){ // 定義一個(gè)局部變量a var a=0; return { getA:function(){ return a; }, add:function(){ a++; }, pow:function(){ a*=2; } } } var obj=fun(); // 如果想在fun函數(shù)外面使用變量a,唯一的方法就是調(diào)動(dòng)getA()方法 console.log(obj.getA()); // 想讓變量a進(jìn)行+1操作 obj.add(); obj.add(); obj.add(); console.log(obj.getA()); obj.pow(); console.log(obj.getA()); </script> </body> </html>
其實(shí)可以理解,JavaScript不像C++、Java那樣能定義函數(shù)的類型,比如int sum()、int add()、int pow()等等,所以就需要利用閉包的特性:即在函數(shù)內(nèi)閉包的記憶性來對(duì)函數(shù)內(nèi)變量進(jìn)行操作,然后返回閉包函數(shù)的名稱來進(jìn)行內(nèi)部數(shù)據(jù)操作。
3.IIFE(Immediately Invoked Function Expression,立即調(diào)用函數(shù)表達(dá)式):
JS特殊函數(shù),一旦被定義,就立即被調(diào)用
3.1 IIFE作用1-為變量賦值
舉例:
前后兩圖對(duì)比一下,體現(xiàn)編程水平。。。簡(jiǎn)化代碼。。美觀。。。
3.2 IIFE作用2-將全局變量變?yōu)榫植孔兞?/h3>
這種情況下,下面五個(gè)語(yǔ)句的結(jié)果都是5,因?yàn)樵贘S中是沒有塊作用域這個(gè)概念的(暫時(shí)這么理解),所以var i就成了全局變量,for循環(huán)后i=5。所以五個(gè)語(yǔ)句的結(jié)果都是5。
那么加下來可以利用IIFE解決這個(gè)問題,其本質(zhì)是利用了函數(shù)的閉包特性
將全局變量i傳入IIFE函數(shù)中,全局變量 就 變成了局部變量,再利用JS函數(shù)的閉包特性,即可以實(shí)現(xiàn)圖中arr[2]()的功能。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
使用Object.defineProperty如何巧妙找到修改某個(gè)變量的準(zhǔn)確代碼位置
Object.defineProperty() 方法直接在一個(gè)對(duì)象上定義一個(gè)新屬性,或者修改一個(gè)已經(jīng)存在的屬性, 并返回這個(gè)對(duì)象。下面這篇文章主要給大家介紹了關(guān)于使用Object.defineProperty如何巧妙找到修改某個(gè)變量的準(zhǔn)確代碼位置的相關(guān)資料,需要的朋友可以參考下2018-11-11js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01如何手動(dòng)實(shí)現(xiàn)es5中的bind方法詳解
這篇文章主要給大家介紹了關(guān)于如何手動(dòng)實(shí)現(xiàn)es5中的bind方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12javascript canvas封裝動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了javascript canvas封裝動(dòng)態(tài)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09跟我學(xué)習(xí)javascript的嚴(yán)格模式
跟我學(xué)習(xí)javascript的嚴(yán)格模式,對(duì)javascript嚴(yán)格模式進(jìn)行概述,進(jìn)入嚴(yán)格模式的方法,以及如何調(diào)用和相關(guān)語(yǔ)法,感興趣的小伙伴們可以參考一下2015-11-11全面解析JavaScript中apply和call以及bind(推薦)
在javascript中apply、call和bind是三兄弟,很好的搭檔,下面小編給大家全面解析JavaScript中apply和call以及bind的相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧2016-06-06