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>

這種情況下,下面五個語句的結(jié)果都是5,因為在JS中是沒有塊作用域這個概念的(暫時這么理解),所以var i就成了全局變量,for循環(huán)后i=5。所以五個語句的結(jié)果都是5。
那么加下來可以利用IIFE解決這個問題,其本質(zhì)是利用了函數(shù)的閉包特性

將全局變量i傳入IIFE函數(shù)中,全局變量 就 變成了局部變量,再利用JS函數(shù)的閉包特性,即可以實現(xiàn)圖中arr[2]()的功能。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
ES6新特性之解構(gòu)、參數(shù)、模塊和記號用法示例
這篇文章主要介紹了ES6新特性之解構(gòu)、參數(shù)、模塊和記號用法,結(jié)合實例形式分析了解構(gòu)、參數(shù)、模塊和記號的功能、用法及相關(guān)使用注意事項,需要的朋友可以參考下2017-04-04
定時器(setTimeout/setInterval)調(diào)用帶參函數(shù)失效解決方法
setInterval()方法可按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達式,setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式,詳細使用方法可以參考下本文2013-03-03
JS使用window.requestAnimationFrame()實現(xiàn)逐幀動畫
這篇文章介紹了JS使用window.requestAnimationFrame()實現(xiàn)逐幀動畫的方法,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06

