闭包
函数里面嵌套函数 可以多层嵌套,返回值为函数
内部函数可以调用外部函数的内容
里面的参数和变量不会被垃圾回收机制回收
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));