高阶函数

321 阅读1分钟

本篇专属我对高阶函数的理解,不对的,可以随时欢迎来矫正,谢谢。

什么是高阶函数

满足以下任意一条,就属于高阶函数

  • 一个函数的参数 是一个函数(例如回调函数)
  • 一个函数 返回一个函数(拆分函数)

典型的例子1

//after可以生成新的函数 等待函数执行次数达到我的预期时执行
const after = (times, fn) => {
    return () =>{
        if(--times === 0){
            fn()
        }
    }
}
let newAfter = after(3,()=>{
    console.log('三次后调用')
})

newAfter();
newAfter();
newAfter();
//第三次执行打印  三次后调用

例子2:写一个函数的before 将核心逻辑提取出来,在外面增加功能

<!--编写原型上的方法-->
Function.prototype.before = function (beforeFn) {
    return (...args) => {
        //箭头函数没有this指向,也没有arguments,所有this会向上级作用域查找
        beforeFn();
        this(...args);//展开运算符
    }
}

const say = (..args) => {//剩余运算符 把所有的参数组成一个数组
    console.log('说话',args)
}

const newSay = say.before(()=>{
    console.log('说话前')  
})
const newSay1 = say.before(()=>{
    console.log('说话前1')  
})

newSay(1,2,3);
newSay1();

运行结果如下,模拟的before方法就是使用的高阶函数

例子3:类似于react中的事务
开始的时候做某件事,结束的时候再做某件事


const perform = (anymethod,wrappers)=> {
    wrappers.forEach((wrap=>{
        wrap.initilizae();
    }))
    anymethod();
    wrappers.forEach((wrap=>{
        wrap.close();
    }))
}

perform(()=>{
    console.log('说话')
},[
    {//warpper
        initilizae(){
            console.log('你好')
        },
        close(){
            console.log('再见')
        }
    },
    {//warpper
        initilizae(){
            console.log('你好1')
        },
        close(){
            console.log('再见1')
        }
    }
    
])

执行结果