闭包的使用场景
2022-02-25 本文已影响0人
雅雅的前端工作学习
闭包作用：延长了局部变量的生命周期。如果没有闭包，外部函数执行完以后局部变量就释放了，内部函数调用不了局部变量报错
image.png
闭包应用：
一、封装私有变量---计数器
最简单的用法，创建一个计数器：
function f1() {
var sum = 0;
var obj = {
inc:function () {
sum++;
return sum;
}
};
return obj;
}
let result = f1();
console.log(result.inc());//1
console.log(result.inc());//2
console.log(result.inc());//3
二、定义一个js模块：
-
函数包裹模块：一个函数中定义多个方法，通过return一个对象，将这些方法暴露出去，在使用时调用myModule方法得到这个暴露出去的对象
image.png
-
立即执行函数包裹模块：一个立即执行函数中定义多个函数，可以将这些函数放在一个对象中，将这个对象作为window的属性暴露出去
image.png
三、函数防抖
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。考虑维护全局纯净，可以借助闭包来实现保存计时器变量timer
如下代码所示：
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
//局部变量timer与使用了timer的函数构成闭包
let timer = null
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
timer = setTimeOut(fn,delay)
}else{
timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
}
}
}
四、回调函数传参
定义行为，然后把它关联到某个用户事件上（点击或者按键），根据不同需要传入对应参数，实现回调函数传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<a href="#" id="size-12">12</a>
<a href="#" id="size-20">20</a>
<a href="#" id="size-30">30</a>
<script type="text/javascript">
function changeSize(size){
return function(){
document.body.style.fontSize = size + 'px';
};
}
var size12 = changeSize(12);
var size14 = changeSize(20);
var size16 = changeSize(30);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-20').onclick = size14;
document.getElementById('size-30').onclick = size16;
</script>
</body>
</html>
