[JavaScript知识库]JavaScript的闭包

了解闭包之前，先来了解一下变量的作用域

变量的作用域有两种：全局变量和局部变量

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)
            }
        }