Javascript 高阶函数-before

高阶函数

1、参数是一个函数
2、函数返回值是一个函数
满足其中一点 就被称为高阶函数

高阶函数的before

意思就是在执行一个函数之前先执行某函数。

   //比如我们要吃饭,创建一个吃饭的方法
  function eat() {
    console.log('吃饭')
  }

  //吃饭之前呢我们需要做饭，再创建一个做饭的方法
  function cooking() {
    console.log("做饭")
  }

  // 通常我们这样就行了
//    function eat() {
//       cooking()
//       console.log('吃饭')
//     }

// eat()
// 这样实现没毛病可以做到，不过这样耦合性太高了，万一不想做饭想叫外卖吃个烤鸭呢？

  function takeaway(){
    console.log("叫外卖吃烤鸭！")
  }

  // 我们需要修改eat方法，内置takeaway进去

  // 所以我们需要改变思路创建一个before的功能例如：
  // eat.before("cooking") //吃饭前先做饭
  // eat.before("takeaway") //吃饭前叫一个烤鸭外卖
  // 。。。等等操作


  // 具体怎么做呢？
  // 预想的before很明显是eat的一个方法，那么我们就能知道before需要挂载到函数的原型上
  // 用一个方法包裹起来，来做一个切片
  Function.prototype.before = function(something){
    something() //执行吃饭前做的一些事
    this() //这里的this是吃饭，函数内部的this取决于函数的调用
  }

  // 试一下
  eat.before(cooking)
  eat.before(takeaway)

没毛病

  // 不过这样还是有一点问题，比如吃饭的时候（晚饭来点啤酒），这样怎么加呢

//希望结果是 叫烤鸭外卖，吃饭的时候来点啤酒

// let dinner = eat.before(takeaway);
// dinner("配点啤酒")

// eat.before(takeaway) //返回一个可执行的方法还得能支持特殊要求，过分吗过分 不过我们还是可以满足的

Function.prototype.before = function (something) {
  // 返回一个函数
  return (...arg)=>{  //为了满足各种需求，参数我们用...arg (剩余所有参数以数组的形式传进去)
    // console.log(...arg) //到了里边再展开
    something() //饭前不管是做饭还是叫外卖这个得先做了
    this(...arg) //吃饭同样很重要，接下来就是怎么满足特殊需求了，啤酒 红酒 白酒 鸡尾酒啥的
  }
}

//最终封装结果
let dinner = eat.before(takeaway);
dinner("配点啤酒","再来点白酒")

// 改造下eat方法

function eat(...arg){ //同样把参数以数组的形式放进去（我们不知道有多少种酒能满足）
  let claim = ""
  arg.map(item=>{
    claim+=item
  })
  console.log(claim)
}

image.png