闭包就是将函数内部和函数外部连接起来的一座桥梁。
- JavaScript高级程序设计:闭包是指有权访问另一个函数作用域中的变量的函数
- JavaScript权威指南:从技术的角度讲,所有的JavaScript函数都是闭包:它们都是对象,它们都关联到作用域链
- 你不知道的JavaScript:当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行
闭包有三个特性:
函数嵌套函数。 函数内部可以引用外部的参数和变量。 参数和变量不会被垃圾回收机制回收。
闭包的好处:
希望一个变量长期存储在内存中。 避免全局变量的污染。 私有成员的存在。
闭包的缺点:
常驻内存,增加内存使用量。 使用不当会很容易造成内存泄露。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<button onclick="count()">计数器</button>
</div>
<div>
<button onclick="debounce()">防抖</button>
</div>
<button onclick="throttling()">节流</button>
</body>
<script>
// 计数器
var count = (function () {
var count = 0
return function () {
count += 1
console.log(count)
}
})()
// 防抖
var debounce = (function () {
var timer = null
return function () {
// 如果定时器存在清除定时器
if (timer) {
clearTimeout(timer)
}
// 设置定时器2秒后执行方法
timer = setTimeout(res => {
console.log("防抖执行")
}, 2000)
}
})()
// 节流
var throttling = (function () {
// 设置 is为true
var is = true
return function () {
// is为true不执行 is为false执行
if (!is) {
// 中断后面的代码执行
return false
}
// 设置is 为false
is = false
// 定时器两秒后执行 两秒后is设为true 此时再调用该函数第一步if语句无法执行 (无法中断执行) 放开代码执行(每两秒开启一次可执行阀门)
setTimeout(() => {
console.log("节流执行")
is = true
}, 2000);
}
})()
</script>
</html>