闭包的理解与应用

闭包的理解

1什么是闭包?
闭包允许函数访问并操作函数外部的变量。[红宝书中这样说: 闭包是指有权访问另外一个函数作用域中的变量的函数]
2. 闭包形成原因?
内部的函数存在外部的作用域的引用就会引起闭包
3. 闭包变量存储的位置?
闭包中的变量存储的位置是堆内存
4. 闭包的作用?
保护函数的私有变量不受外部干扰,形成不销毁的栈内存

闭包的使用场景?

1. return回一个函数

var n = 10
function fn(){
       var n = 20
       function f(){
       n++;
       console.log(n)
       }
       return f
}
var x = fn()
x(). //21
这里的return f .f() 就是一个闭包

2. 函数作为参数

var a ='lemon'
function foo(){
  var a ='orange'
  function f(){
      console.log(a)
  }
  return f
}
function fn(p){
    var a = 'apple'
    p()
}
fn(foo()) 
 输出是 orange
 使用return f,f()就是闭包,fn(foo())执行的参数就是f(),因为f()中的a的上级作用域就是foo(),所以输出就是orange

3. IIFE (自执行函数)

 var str ='lemon'
 ( function f(){
      console.log(n)
 }
 )()
 输出是 lemon
 同样也是产生了闭包f(),存在windows下的引用n

4. 循环赋值

for(var i = 0; i<10; i++){
  (function(j){
       setTimeout(function(){
        console.log(j,i,'ttt')
    }, 1000) 
  })(i)
}
 for(var i = 0;i<10;i++){
 }

 输出结果
 0 10 'ttt'
 1 10 'ttt'
 2 10 'ttt'
 3 10 'ttt'
 4 10 'ttt'
 5 10 'ttt'
 6 10 'ttt'
 7 10 'ttt'
 8 10 'ttt'
 9 10 'ttt'

因为存在闭包的原因上面能依次输出1~10，闭包形成了10个互不干扰的私有作用域。将外层的自执行函数去掉后就不存在外部作用域的引用了，输出的结果就是连续的 10。为什么会连续输出10，因为 JS 是单线程的遇到异步的代码不会先执行(会入栈)，等到同步的代码执行完 i++ 到 10时，异步代码才开始执行此时的 i=10 输出的都是 10。

5 使用回调函数,就是在使用闭包

window.name = '林一一' 
setTimeout(function timeHandler(){ 
console.log(window.name); }, 100)

6 截流防抖

节流:
function throttle(fn,timeout){
    let timer = null
    return function(...arg){
        if(timer) return 
        timer =setTimeout( ()=>{
         fn.apply(this,arg)
         time =null
        
        },timeout)
    }
}

防抖
function debounce(fn,timeout){
     let timer = null
     return function(...arg){
         clearTimeout(timer)
         timer = setTimeout(()=>{
         fn.apply(this,arg)
         },timeout)
     }

}

闭包需要注意的地方

容易导致内存泄漏。闭包会携带包含其它的函数作用域，因此会比其他函数占用更多的内存。过度使用闭包会导致内存占用过多，所以要谨慎使用闭包

来自掘金作者

juejin.cn/post/693746…