博客

闭包

函数里面嵌套函数 可以多层嵌套,返回值为函数

内部函数可以调用外部函数的内容

里面的参数和变量不会被垃圾回收机制回收

        function fn(a){
            //参数a 这个参数a是不会被销毁的(内存会被占用)
            return function(){
                //访问到这个a
                console.log(a);
            }
        }
        console.log(fn('b'));//调用外部函数
        fn('b')()//调用内部函数

例子

        function fn1(){
            let i =0
            return function(){
                i++
                return i
            }
        }
        console.log(fn1()());//1    每次从0开始
        console.log(fn1()());//1    每次从0开始
        console.log(fn1()());//1    每次从0开始
        let a = fn1()   //调用一次  i=0
        console.log(a());   //i=i++     1
        console.log(a());   //i=i++     2
        console.log(a());   //i=i++     3

好处

1.可以让一个变量长期驻扎在内存当中不被释放(缓存的建立会使访问速度变快)

2.避免全局变量的污染,和全局变量不同,闭包中变量无法被外部访问

3.私有成员的存在,无法被外部调用,只可以自己内部使用

坏处

内存会被占用

闭包可以完成的功能

1.防抖

2.节流

闭包的一种写法

函数柯里化

防抖

        function debounce(fun,wait){//传入参数  执行的函数,等待时间
            let time = null //声明延时器对象为空
            return function(){
                clearInterval(time)//清除延时器
                time  = setTimeout(()=>{
                    fun()
                },wait)
            }
        }
        let debounce1 = debounce(function(){
            console.log('hello');
        },1000)
        document.querySelector('div').onmousedown = function(){
            debounce1()
        }

节流

        function throttle(fun,wait){//传入参数  执行的函数,等待时间
            let time = null//节流阀
            
            return function(){
                if(time){   //null就是false,执行下面的,true直接跳过
                return
                }
                time = setTimeout(()=>{
                    fun()
                    time = null//做完后节流阀设置为null
                },wait)
            }
        }
        let throttle1 = throttle(function(){
            console.log('world');
        },2000)
        document.querySelector('div').onclick=function(){
            throttle1()
        }

防抖与节流的区别

1,防抖是避免重复执行 只执行一次

2,节流 减少执行次数 执行多次

闭包的一种写法 函数柯里化

函数柯里化 其实就是函数颗粒化 将一个函数变成一个个颗粒可以组装

就是这个里面的多个参数 将他变成一个个的函数来传递这个参数

apply 传参为对应指向的对象及相关的参数数组 自动调用方法

call 传参为对应指向的对象及相关的参数值 自动调用方法

bind 传参只能传指向的对象 用来改变函数内的this指向

简单柯里化 他就是使用了一个函数来改造原本的函数

        //求和函数
        function fnSum(a,b,c){
            return a+b+c
        }
        //简单柯里化 他就是使用了一个函数来改造原本的函数
        function curry(fn){
            return function(a){
                return function(b){
                    return function(c){
                        return fn(a,b,c)
                    }
                }
            }
        }
        //调用 避免了多余的无用参数传递
        let fnCurry1 = new curry(fnSum)//函数
        console.log(fnCurry1(1)(2)(3));//6

改进柯里化函数1

        //改进柯里化函数
        function curry1(fn){
            //接收一个后面的参数 除了fn的参数
            let args = Array.prototype.slice.call(arguments,1)
            return function(){
                let newArg = args.concat(Array.from(arguments)) //将内部函数的参数和外部的参数合并
                return fn.apply(this,newArg) //将内部函数自动指向 传入所有的参数
            }
        }
        let fn2 = curry1(fnSum,1) //函数
        console.log(fn2(2,3)); //6
        // console.log(fn2(2)(3)); //错误 我们现在只套了俩层

改进柯里化函数2

         //改进柯里化函数
         function curry2(fn){
                //接收一个后面的参数 除了fn的参数
                let args = Array.prototype.slice.call(arguments,1)
                return function(){
                    let newArg = args.concat(Array.from(arguments)) //将内部函数的参数和外部的参数合并
                    if(newArg.length < fn.length){ //参数没有到三个 fn.length获取传递的函数的参数个数
                        return curry2.call(this,fn,...newArg) //又套了一个function 
                    }else{
                        return fn.apply(this,newArg) //将内部函数自动执行 传入所有的参数
                    } 
                }
            }
        let fn3 = curry2(fnSum) //函数
        console.log( fn3(1)(2)(3));
        console.log( fn3()()(1,2));//少一个参数 返回funtion 效率更高  可读性高
        console.log( fn3()()(1)(2)(3));