|
了解闭包之前，先来了解一下变量的作用域
变量的作用域有两种：全局变量和局部变量
JavaScript语言特殊之处，就在于函数内部可以直接读取全局的变量。
var n = 1 //全局变量
function f1(){
console.log(n) //可以访问全局变量
}
f1()
而函数外部无法读取函数内部的变量。
function f1(){
let n = 1 //局部变量
}
console.log(n) //error
如何使外部函数读取内部函数的变量
为了使外部函数读取到函数内部的变量，那就在函数的内部，再定义一个函数
function f1 (){
let n = 1
function f2 (){
console.log(n)
}
return f2
}
let result = f1() //返回值是f2
result() //执行f2
由于作用域的问题，函数f1内部定义的函数f2是可以读取到函数f1中的变量的，所以将函数f2返回给外部的话，外部就可以访问到f1中的变量。
因为f1函数的返回值赋值给了一个全局变量，所以使f2函数始终保存在内存中，而f2函数又访问了f1函数中的变量，从而使f1函数也依然保存在内存中。所以f1函数不会在调用结束后，被垃圾回收机制回收。
闭包的概念
在 JS 忍者秘籍(P90)中对闭包的定义：闭包允许函数访问并操作函数外部的变量。
红宝书上对于闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数。
概况上面的话，闭包是指有权访问另一个函数作用域中变量的函数
形成闭包的原因
内部函数存在外部作用域的引用就会导致闭包。
var a = 0
function foo(){
var b =14
function fo(){
console.log(a, b)
}
fo()
}
foo()
由于 fo函数内部引用了外部作用域的a、b变量，所以此时就产生了闭包。
闭包变量存储的位置
闭包中的变量存储在堆内存中。
假如闭包中的变量存储在栈内存中，那么栈的回收会把栈顶的变量自动回收。所以闭包中的变量可能就会被回收掉。所以闭包引用的变量只能存储在堆内存中。
闭包的用处
- 使外部函数可以访问内部函数的变量，延长了变量的作用域链。
- 避免了变量全局污染
闭包的注意点
- 由于闭包会使函数中的变量都保存在内存中，内存消耗很大，所以不能滥用闭包。且可能造成
内存泄漏。解决方法是，在退出函数之前，将不使用的变量设置为null。 - 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象使用，把闭包当作它得公用方法，把内部变量当作它的私用属性，这时一定要小心，不要随便改变父函数内部的变量值。
闭包的应用场景
函数累加器
// 函数累加器
function add(){
let count = 0
function sum(){
count++
return count
}
return sum
}
let counter = add()
console.log(counter());
console.log(counter());
循环赋值
for(var i = 0; i<10; i++){
(function(j){
setTimeout(function(){
console.log(j)
}, 1000)
})(i)
}
节流防抖
// 节流
function throttle(fn,timeout){
let timer = null
return function(){
// 判断timer是否有值 有则直接结束
if(timer) return
// 没有则赋值
timer = setTimeout(()=>{
fn.apply(this)
// 执行完记得将tiemr设置为null
timer = null
},timeout)
}
}
// 防抖
function debounce(fn,timeout){
let timer = null
return function(){
// 清空上次的操作
clearTimeout(timer)
tiemr = setTimeout(()=>{
fn.apply(this)
},timeout)
}
}
|