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)閉包的記憶性來對函數(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-為變量賦值
舉例:
前后兩圖對比一下,體現(xiàn)編程水平。。。簡化代碼。。美觀。。。


3.2 IIFE作用2-將全局變量變?yōu)榫植孔兞?/h3>

這種情況下,下面五個(gè)語句的結(jié)果都是5,因?yàn)樵贘S中是沒有塊作用域這個(gè)概念的(暫時(shí)這么理解),所以var i就成了全局變量,for循環(huán)后i=5。所以五個(gè)語句的結(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è)對象上定義一個(gè)新屬性,或者修改一個(gè)已經(jīng)存在的屬性, 并返回這個(gè)對象。下面這篇文章主要給大家介紹了關(guān)于使用Object.defineProperty如何巧妙找到修改某個(gè)變量的準(zhǔn)確代碼位置的相關(guān)資料,需要的朋友可以參考下2018-11-11
js實(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ì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
javascript 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)格模式,對javascript嚴(yán)格模式進(jìn)行概述,進(jìn)入嚴(yán)格模式的方法,以及如何調(diào)用和相關(guān)語法,感興趣的小伙伴們可以參考一下2015-11-11
全面解析JavaScript中apply和call以及bind(推薦)
在javascript中apply、call和bind是三兄弟,很好的搭檔,下面小編給大家全面解析JavaScript中apply和call以及bind的相關(guān)知識,感興趣的朋友一起學(xué)習(xí)吧2016-06-06

