理解js高阶函数就像吃泡面一样简单

534 阅读3分钟

本来这篇文章打算书接上回继续扩展的,但是前天在手写promise的时候突然来灵感想聊聊js高阶函数,用更加贴近生活的方式来解读高阶函数。

  • promise用法就不扩展了,主要是作为例子来理解高阶函数。promise的中文意思是承诺,那就理解为承诺将来的某个时间做某个事情给你一个结果,下面是最简版手写类,和一段应用代码
class MyPromise {
    constructor(handle) {
        this._value = undefined
        handle(this.resolve.bind(this), this.reject.bind(this))
    }
    resolve(value) {
        this._value = value
    }
    reject(err) {
        this._value = err
    }
    then(onFulfilled, onRejected) {
        return new MyPromise((onFulfilledNext, onRejectedNext) =>{})
    }
}

new MyPromise((resolve, reject) => {
    const result = 'result'
    resolve(result)
}).then((res) => {
    Promise.resolve(res)
}).then(res => {
    console.log(res)
})

下面描述下这个过程,作图工具不会用,就口述吧😂

  • new MyPromise实例化执行构造函数 ===> constructor接收实参,是一个函数 ===> 执行传进来的函数,这里叫handle

看一下构造函数中的handle,我们发现传过来的handle需要两个参数,以前只是会用promise的时候很疑惑,这两个resolve, reject是个什么鬼,看一下MyPromise类,很明显,这俩鬼是两个实例方法,在执行handle的时候传过去的,继续这个过程:

  • 执行handle ===> 执行handle中传进来的两个方法resolve,reject,看一下应用代码
new MyPromise((resolve, reject) => {
    const result = 'result'
    resolve(result)
})

resolve和reject函数也是需要参数的,这个参数就是应用代码中的result继续这个过程:

  • 执行resolve、reject,得到一个结果 ===> 链式调用then函数,做接下来的事情。

执行resolve的时候如果没有传入参数,this._value还是undefined,所以调用then函数之后也是空,所以console.log(res)一定是undefined

有两个点简单说一下:

  • 构造函数中handle传参为什么要用bind(this)---> resolve和reject函数的运行时的上下文是在调用方,如果不在构造函数中绑定this,执行的时候会报错this._value is not defined,好像是这个错😂
  • then函数中为什么返回一个MyPromise实例 ---> 因为要实现链式调用,肯定要返回一个实例

下面用吃泡面模仿一下这个过程,可能会容易理解一些:

new MyPromise((resolve, reject) => {//resolve吃面成功方法,reject吃面失败方法
    const goodresult = '热水和泡面准备好了'
    // const badresult = '水没有加热或者泡面过期了'
    resolve(goodresult)
    // reject(badresult)
}).then((res) => {
    Promise.resolve(res)// 泡面真香,一会要去努力搬砖喽!
}).catch(res => {
    console.log(res)// 没吃上面,好饿,一会去吃鸡腿
})
  • new MyPromise实例化(暂且比作实例化一个要吃泡面的人或者做某件事的人吧) ===> constructor接收实参(要吃面的动作) ===> 执行传进来的函数,这里叫handle(要吃面了)
  • 执行handle(准备吃面) ===> 执行handle中传进来的两个方法resolve,reject()

上面说了,reaolve就是吃面的动作,而想要吃面一定要有面和水呀,上面代码中的goodresult和badresult就是面和水的情况

  • 执行resolve、reject,得到一个结果(结果就是如果执行resolve就吃饱啦,reject就是没吃上喽) ===> 链式调用then函数,做接下来的事情(去搬砖赚钱或者找鸡腿吃😆)。

基本就是这样一个过程,用一个简单的事例简述一下我的理解,也许不是很恰当。我们发现高阶函数主要就是以函数作为参数,在其他函数间相互传递来实现某些功能,你有可能会疑惑为什么这样写,我想最大的好处就是低耦合、到处复用吧,一个方法做一件事情,比如你只负责吃面生产面甚至泡面的动作都交给其他人处理,各司其职。

由于实力有限,写的比较low,主要针对初中级工程师,大神请轻喷,不早了,古德奈特!