高阶函数的应用

高阶函数的概念

首先我们先对高阶函数的概念有一个初步的认识

如果函数的参数是一个函数，或者函数返回一个函数，那么这个函数就是一个高阶函数

我们通过一个简单的例子来认识一下高阶函数

function fn() {

}

fn(() => {

})

我们可以看到函数fn接收一个函数作为参数，那么这个最外层的函数fn就是高阶函数

接下来我们看下高阶函数的神奇之处吧

AOP编程

AOP 是一种编程思路，意思为面向切片编程， 我们来看一个简单的例子(brfore函数)

function say(who) {
    console.log(who + 'hello world')
}

我们需要在say函数执行之前执行某一些逻辑，那我们就可以用AOP的切片思路实现一个before函数，里面放着say函数执行之前的逻辑

function say(who) {
    console.log(who + 'hello world')
}

Function.prototype.before = function (beforeFun) {
    return  (...args) => {
        beforeFun()
        this(...args)
    }
}

const beforeSay = say.before(() => {
    console.log('开始说话')
})

beforeSay('chenying')

我们可以看到before函数接收一个函数，并且返回一个新的函数，就是高阶组件神奇的用法之一

react的事务

这里就不详细的说react的事务了，我们来简单的实现一下

class Transaction {
    proform (anyMethod, warpper) {
        warpper.initalize()
        anyMethod()
        warpper.close()
    }
}
let transaction = new Transaction()
let oldFunc = () => {
    console.log('原来的逻辑')
}
transaction.proform(oldFunc, {
    initalize() {
        console.log('初始化')
    },
    close() {
        console.log('结束')
    }
})

通过事务的这套机制我们就可以在原来的逻辑执行之前和之后添加一些自己的逻辑了，但是react的事务机制还是支持多个逻辑一起执行

class Transaction {
    proform (anyMethod, warppers) {
        warppers.forEach(warpper => warpper.initalize())
        anyMethod()
        warppers.forEach(warpper => warpper.close())
    }
}
let transaction = new Transaction()
let oldFunc = () => {
    console.log('原来的逻辑')
}
transaction.proform(oldFunc, [
    {
        initalize() {
            console.log('初始化1')
        },
        close() {
            console.log('结束1')
        }
    }, {
        initalize() {
            console.log('初始化2')
        },
        close() {
            console.log('结束2')
        }
    }
])

执行代码，结果为 初始化1 -> 初始化2 -> 原来的逻辑 -> 结束1 -> 结束2

柯里化

略

after函数

另外一个高阶函数的用法我们肯定很熟悉，在ladash中有一个after函数,这个函数的基本用法是

const fn = after(2, callback)
fn()
fn()

调用after函数，第一个参数是延迟执行的次数，第二个参数是回调，上述代码的意思是得到的返回函数fn要执行2次之后我们才会去执行回调函数

那我们来大致简单实现一下这个after函数吧

function after (times, callback) {
    return function () {
        if (--times === 0) {
            callback()
        }
    }
}

而且after函数还有一个特别的用处就是处理异步高并发，我们只需要知道异步任务的数量，并且对应的调用after函数就好了