闭包
闭包用于解决,外部函数访问不到内部函数的变量,借助内部函数可以访问到外部函数的变量的特性。就是函数嵌套函数,如下。
代码解释:
function outerFun() {
let a = 10;
function innerFun() {
console.log(a);
}
return innerFun;
}
let res = outerFun();
res();
输出:10。
这就是函数嵌套函数,内部函数是闭包。内部函数的变量可以访问外部函数的变量a,所以可以输出10。
正常情况下,函数执行完毕,内存变量会销毁,也就是释放内存空间,那么就不会把输出结果10,而是输出undefined或者报错
那为什么上面还会输出结果呢?
因为闭包函数就是建立在函数内部的,内部函数没有执行完成,在上面的代码中,内部函数innerFun
作为返回值被赋值给了res
,内部函数innerFun
并没有执行完成,外部函数变量就不会被销毁,它可以访问到外层函数的变量,所以就会导致外层函数执行完毕时,它的作用域不会被销毁。直到闭包函数也不存在。
闭包代码片段
- 每次外部函数执行的时候,都会开辟一块内存空间,外部函数的地址不同,都会重新创建一个新的地址:
function outerFn(){
var i = 0;
function innerFn(){
i++;
console.log(i);
}
return innerFn;
}
var inner = outerFn(); //每次外部函数执行的时候,都会开辟一块内存空间,外部函数的地址不同,都会重新创建一个新的地址
inner();
inner();
inner();
var inner2 = outerFn();
inner2();
inner2();
inner2();
依次输出:1 2 3 1 2 3
var i = 0;
function outerFn(){
function innnerFn(){
i++;
console.log(i);
}
return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();
inner2();
inner1();
inner2();
inner1();
inner2(); //1 2 3 4 5 6
依次输出:1 2 3 4 5 6
闭包经典面试题
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i++);
}, 1000)
}
console.log(i);
先输出5,1秒后依次输出5,6,7,8,9。
function fnnn(){
var arr = [];
for(var i = 0;i < 5;i ++){
arr[i] = function(){
return i;
}
}
return arr;
}
var list = fnnn();
for(var i = 0,len = list.length;i < len ; i ++){
console.log(list[i]());
}
输出五个5。
防抖和节流就是两个典型的闭包案例
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。
防抖是,当在一秒内快速多次点击按钮时,只执行最后一次点击的请求,有效的减少发送请求的次数。
如,在input
输入框里快速输入时,取输入完成的结果发送请求,而不是从第一个字符就开始发送,这就是 “只执行最后一次点击的请求” 的意思。
<body>
<input type="text">
<script>
let input = document.querySelector('input')
function fun1() {
console.log('点击了!!!');
}
input.addEventListener('keyup', debounce(fun1, 1000))
function debounce(fn, delay) {
let timer = null;
return function () {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fun1()
}, delay)
}
}
</script>
</body>
节流是,控制事件执行次数,保证一定时间段内只调用一次事件处理函数。
如,滚动事件,少则一秒内发生几百次触发,非常消耗性能,利用闭包和定时器,可以保证执行次数。
函数执行的前提条件是,持续触发时,持续关闭开关,等到setTimeout到时间了,再把开关打开,函数就会执行了。
<style>
body {
height: 2000px;
}
</style>
window.onscroll = throttle(function () {
console.log('滚动啦!');
}, 1000)
function throttle(fn, delay) {
let valid = true;
return function () {
if (valid) {
setTimeout(() => {
// fn()
func.apply(this, arguments)
valid = true
}, 1000)
}
}
valid = false;
}
闭包代码理解参考:
闭包,看这一篇就够了——带你看透闭包的本质,百发百中