什么是閉包?
定義:閉包是指在 JavaScript 中循头,內部函數(shù)總是可以訪問其所在的外部函數(shù)中聲明的參數(shù)和變量绵估,即使在其外部函數(shù)被返回(壽命終結)了之后。
閉包就是能夠讀取其他函數(shù)內部變量的函數(shù)卡骂,說白了閉包就是個函數(shù)国裳,只不過是處于其他函數(shù)內部而已。
由于在javascript中全跨,只有函數(shù)內部的子函數(shù)才能讀取局部變量缝左,所以說,閉包可以簡單理解成“定義在一個函數(shù)內部的函數(shù)“。
所以渺杉,在本質上蛇数,閉包是將函數(shù)內部和函數(shù)外部連接起來的橋梁。
用途是什么是越?
- 1.訪問函數(shù)內部的變量
- 2.防止函數(shù)內部的變量執(zhí)行完城后耳舅,被銷毀,使其一直保存在內存中倚评。
function outer(x) {
// 參數(shù)相當于局部的變量
function inner(y) {
console.log(x + y);
}
return inner;
}
var closure = outer(3);
closure(7); // 輸出10
inner函數(shù)把自己內部的語句浦徊,和自己在聲明時所處的作用域一起封裝成了一個密閉的環(huán)境,我們就稱之為閉包天梧。
函數(shù)本身就是一個閉包盔性,函數(shù)在定義的時候,就能記住自己的外部環(huán)境和內部語句呢岗,每次執(zhí)行的時候冕香,會參考定義時的密閉環(huán)境。
閉包的缺點
- 缺點:如果不是某些特定任務需要使用閉包后豫,在其它函數(shù)中創(chuàng)建函數(shù)是不明智的悉尾,因為閉包在處理速度和內存消耗方面對腳本性能具有負面影響。
實際的項目應用
- 常用于項目的防抖節(jié)流函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function() {
//獲取兩個按鈕
const debounceBtn = document.querySelector("#debounce")
const thorttleBtn = document.querySelector("#thorttle")
//防抖
function Debounce(fn, delay) {
let timer = null
//定義內部函數(shù)
const debounce = function() {
//形成閉包硬贯,timer變量不被釋放焕襟,如果timer不為空則清除延時執(zhí)行
if(timer) clearTimeout(timer)
//最后一次觸發(fā)執(zhí)行
timer = setTimeout(() => {
fn()
}, delay)
}
return debounce
}
debounceBtn.onclick = Debounce(() => {console.log("Debounce")}, 1000)
//節(jié)流
function Thorttle(fn, delay) {
let timer = null
//定義內部函數(shù)
const thorttle = function() {
//如果有延時任務則不在重新觸發(fā)
if(!timer) {
timer = setTimeout(() => {
fn()
//delay時間后把timer設置為null
timer = null
}, delay)
}
}
return thorttle
}
thorttleBtn.onclick = Thorttle(() => {console.log("Thorttle")}, 1000)
}
</script>
</head>
<body>
<button id="debounce">防抖</button>
<button id="thorttle">節(jié)流</button>
</body>
</html>