什么是闭包
摘抄自:阮一峰的网络日志
我的理解是,闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。
- 在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包可以用在许多地方。它的最大用处有前面两个:
- 1、是前面提到的可以读取函数内部的变量(让外部访问函数内部变量)
- 2、就是让这些变量的值始终保持在内存中。
此外,闭包还有以下特点:
- 3、避免使用全局变量,防止全局变量污染
- 4、造成内存泄漏
举例
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();//这里是f1函数运行之后,把f2 return出来了。
result(); // 999
nAdd();
result(); // 1000
在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
这段代码中另一个值得注意的地方,就是
“nAdd=function(){n+=1}” 这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。(我还不太理解)
注意点
1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
(简单来说就是,导致内存消耗很大)
2)闭包会在父函数外部,改变父函数内部变量的值。
所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
试题
一:
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function () {
return function () {
return this.name;
};
}
};
alert(object.getNameFunc()());//The Window
//这里如果要打印getNameFunc里面的name的话,会报错。没有定义
闭包的作用
实现公有变量
例:函数累加器
function add() {
var count = 0;
function demo() {
count ++
console.log(count);
}
return demo;
}
var counter = add();
可以做缓存(存储结构)
eg:eater。缓存是外部不可见的,但是确实有存储结构
<script>
function test() {
var num = 100;
function a() {
num ++;
console.log(num);
}
function b() {
num --;
console.log(num);
}
return [a,b];
}
var myArr = test();
myArr [0]();
myArr[1]();
</script>
可以实现封装,属性私有化。(后续添加例子)
eg: Person();
模块化开发,防止污染全局变量(后续添加例子)
防抖和节流
1、防抖
假设你一直点击“发送”按钮,那么在你停止点击之后的“delay”毫秒之后才会执行fn函数。
这个过程只执行了一次。
这就是防抖。
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
timer = setTimeout(fn,delay)
}else{
timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
}
}
}
//因为setTimeout(fn,delay)肯定执行,可以简化
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay) // 简化写法
}
}
//例如
<body>
<button onclick="debounce(test,1000)()"></button>//记得是运行函数return出来的匿名函数
</body>
<script>
function test() {
console.log(111);
}
function debounce(fn, delay) {
let timer = null //借助闭包
return function () {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(fn, delay) // 简化写法
}
}
</script>
//另外,这里还有另外的写法(不要这么用,只是加深理解)
<body>
<button onclick="object.debounce(test,1000)()"></button>
</body>
var timer =null//这里需要将timer设为全局变量,不好。
var object = {
debounce: function (fn, delay) {
return function () {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(fn, delay) // 简化写法
};
}
}
2、节流
假设你在delay时间内,一直点击”按钮“点了10次,那么再delay时间之后,就会腹泻式执行fn10次。
这就是节流
//这里就是换了一下,不再赘述
<body>
<button onclick="throttle(test,2000)()"></button>
</body>
function throttle(fn, delay) {
let valid = true
return function () {
if (!valid) {
//休息时间 暂不接客
return false
}
// 工作时间,执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
这里通过上面提到的第二点作用,实现防抖和节流
防抖节流常用的场景
1、搜索框input事件,例如要支持输入实时搜索可以使用节流方案(间隔一段时间就必须查询相关内容),或者实现输入间隔大于某个值(如500ms),就当做用户输入完成,然后开始搜索,具体使用哪种方案要看业务需求。
2、页面resize事件,常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染(这种情形一般是使用防抖,因为只需要判断最后一次的变化情况)
3、提交表单信息时,比如发布说说,防止”手抖“了,发了两条一样的说说,就可以使用防抖。