“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情”
前言
上篇讲了闭包的定义以及其本质，本篇将针对闭包的应用进行详细说明。首先我们需要了解闭包的作用及其优缺点，
闭包的作用及其优缺点
- 作用：函数的变量私有化（内层函数能访问外层函数变量，外层函数无法直接使用其变量）
- 优点：保护私有变量、避免全局变量污染，变量一直存在在内存中
- 缺点：变量一直存在内存中，不会释放
闭包的应用
- 作为参数传递---回调函数
- 作为返回值---函数柯里化
//回调函数应用
function fn(){
var a = 1
funtion fn1(b){
console.log(b)
return a + b
}
fn2(fn1)
}
function fn2(fn){
fn(3) //可以获取fn函数的返回值，或者将参数传递到回调函数进一步处理
}
除此之外，定时器setTimeout，事件监听addEventListener等，都是函数作为参数传递，就是闭包的应用
//函数柯里化
function add (n1, n2, n3, n4, n5) {
return n1 + n2 + n3 + n4 + n5
}
function addCurry (n1){
return fn2(n2){
return fn3(n3){
return fn4(n4){
return fn5(n5){
return n1+n2+n3+n4+n5
}
}
}
}
}
add(1,2,3,4,5)
addCurry(1)(2)(3)(4)(5) //函数作为返回值，可以获取到外层函数的变量进行
模块化，即立即执行函数 var Module = (function(){ })() 函数作为模块的属性供外部使用，这些都是闭包的应用。
react hooks应用
import { useEffect, useRef,useState } from 'react';
function usePreviousState(state){
const previousState = ref(null)
useEffect(() => { ref.current = state })
return ref.current;
}
function father(){
const [state,setStateData] = useState(1)
const lastState = usePreviousState(state)
return <div onClick={()=>setStateData(state++)}>{lastState}</div>
}
//lastState是state的上次的值
//usePreviousState和father组件就是个简单的闭包，将father函数的state进行暂存。
总结
本篇对闭包的作用及应用进行了说明，可以说，有函数的地方就存在闭包，如何使用好闭包，就需要我们对其本质进行深入理解。相信看完这篇，大家都对闭包有个清晰的认识。上篇地址： 闭包的神秘面纱（上）
