JavaScript閉包詳解
1.什么是閉包?
函數(shù)本身和該函數(shù)聲明時所處的環(huán)境狀態(tài)的組合。
1.2 閉包的記憶性:函數(shù)能夠記住定義時所處的環(huán)境
1.3 閉包現(xiàn)象:JS中每次創(chuàng)建函數(shù)時都會創(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>
細節(jié):
1:閉包的記憶性
2:函數(shù)return checkTemp,是一個函數(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> // 封裝一個函數(shù),這個函數(shù)的功能就是私有化變量 function fun(){ // 定義一個局部變量a var a=0; return { getA:function(){ return a; }, add:function(){ a++; }, pow:function(){ a*=2; } } } var obj=fun(); // 如果想在fun函數(shù)外面使用變量a,唯一的方法就是調(diào)動getA()方法 console.log(obj.getA()); // 想讓變量a進行+1操作 obj.add(); obj.add(); obj.add(); console.log(obj.getA()); obj.pow(); console.log(obj.getA()); </script> </body> </html>
其實可以理解,JavaScript不像C++、Java那樣能定義函數(shù)的類型,比如int sum()、int add()、int pow()等等,所以就需要利用閉包的特性:即在函數(shù)內(nèi)閉包的記憶性來對函數(shù)內(nèi)變量進行操作,然后返回閉包函數(shù)的名稱來進行內(nèi)部數(shù)據(jù)操作。
3.IIFE(Immediately Invoked Function Expression,立即調(diào)用函數(shù)表達式):
JS特殊函數(shù),一旦被定義,就立即被調(diào)用
3.1 IIFE作用1-為變量賦值
舉例:
前后兩圖對比一下,體現(xiàn)編程水平。。。簡化代碼。。美觀。。。
3.2 IIFE作用2-將全局變量變?yōu)榫植孔兞?/h3>
這種情況下,下面五個語句的結果都是5,因為在JS中是沒有塊作用域這個概念的(暫時這么理解),所以var i就成了全局變量,for循環(huán)后i=5。所以五個語句的結果都是5。
那么加下來可以利用IIFE解決這個問題,其本質(zhì)是利用了函數(shù)的閉包特性
將全局變量i傳入IIFE函數(shù)中,全局變量 就 變成了局部變量,再利用JS函數(shù)的閉包特性,即可以實現(xiàn)圖中arr[2]()的功能。
總結
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內(nèi)容!
相關文章
使用Object.defineProperty如何巧妙找到修改某個變量的準確代碼位置
Object.defineProperty() 方法直接在一個對象上定義一個新屬性,或者修改一個已經(jīng)存在的屬性, 并返回這個對象。下面這篇文章主要給大家介紹了關于使用Object.defineProperty如何巧妙找到修改某個變量的準確代碼位置的相關資料,需要的朋友可以參考下2018-11-11全面解析JavaScript中apply和call以及bind(推薦)
在javascript中apply、call和bind是三兄弟,很好的搭檔,下面小編給大家全面解析JavaScript中apply和call以及bind的相關知識,感興趣的朋友一起學習吧2016-06-06