[深入05] 柯里化 偏函数 函数记忆 尾递归

头像
woow_wu7
    阅读 8 分钟
    1

    导航

    [[深入01] 执行上下文](https://juejin.im/post/684490...
    [[深入02] 原型链](https://juejin.im/post/684490...
    [[深入03] 继承](https://juejin.im/post/684490...
    [[深入04] 事件循环](https://juejin.im/post/684490...
    [[深入05] 柯里化 偏函数 函数记忆](https://juejin.im/post/684490...
    [[深入06] 隐式转换 和 运算符](https://juejin.im/post/684490...
    [[深入07] 浏览器缓存机制（http缓存机制）](https://juejin.im/post/684490...
    [[深入08] 前端安全](https://juejin.im/post/684490...
    [[深入09] 深浅拷贝](https://juejin.im/post/684490...
    [[深入10] Debounce Throttle](https://juejin.im/post/684490...
    [[深入11] 前端路由](https://juejin.im/post/684490...
    [[深入12] 前端模块化](https://juejin.im/post/684490...
    [[深入13] 观察者模式 发布订阅模式 双向数据绑定](https://juejin.im/post/684490...
    [[深入14] canvas](https://juejin.im/post/684490...
    [[深入15] webSocket](https://juejin.im/post/684490...
    [[深入16] webpack](https://juejin.im/post/684490...
    [[深入17] http 和 https](https://juejin.im/post/684490...
    [[深入18] CSS-interview](https://juejin.im/post/684490...
    [[深入19] 手写Promise](https://juejin.im/post/684490...
    [[深入20] 手写函数](https://juejin.im/post/684490...

    [[react] Hooks](https://juejin.im/post/684490...

    [[部署01] Nginx](https://juejin.im/post/684490...
    [[部署02] Docker 部署vue项目](https://juejin.im/post/684490...
    [[部署03] gitlab-CI](https://juejin.im/post/684490...

    [[源码-webpack01-前置知识] AST抽象语法树](https://juejin.im/post/684490...
    [[源码-webpack02-前置知识] Tapable](https://juejin.im/post/684490...
    [[源码-webpack03] 手写webpack - compiler简单编译流程](https://juejin.im/post/684490...
    [[源码] Redux React-Redux01](https://juejin.im/post/684490...
    [[源码] axios ](https://juejin.im/post/684490...
    [[源码] vuex ](https://juejin.im/post/684490...
    [[源码-vue01] data响应式 和 初始化渲染 ](https://juejin.im/post/684490...

    前置知识

    函数的参数
    • length：函数的legth属性，返回函数预期的参数个数（形参）

    • arguments：arguments对象，包含了程序运行时的所有参数（实参）

      类似数组的对象转换成数组
    • [].slice.call(类似数组的对象)
    • [].slice.apply(类似数组的对象)
    • Array.prototype.slice.call(类似数组的对象, x) // x是绑定this后传入slice函数的参数

    • Array.from()

      偏函数和柯里化的概念

    • 柯里化 curry：

      • 将接收多个参数的函数，转换成接收一个单一参数的函数，并返回接收余下参数，并返回最终结果的新函数
      • <font color=red>即当参数小于预期参数时，返回一个可以接收剩余参数的函数，参数大于等于预期参数时，返回最终结果</font>

    • 偏函数 partial application：

      • 是固定一个或多个参数，产生另一个较小元的函数 n元函数 => 转换成n-x元函数

    柯里化 curry

    • 柯里化函数，他接收函数A作为参数，运行后能够返回一个新的函数，并且这个新的函数能够处理函数A的剩余参数

      1. 柯里化阶段一

    • 需求： 将add(1,2,3)转化成curryAdd(1)(2)(3)

    • <font color=red>缺点：只能处理3个参数的情况，不能处理任意多个参数的情况，毫无扩展性</font>

      
需求： 将add(1,2,3)转化成curryAdd(1)(2)(3)
缺点：只能处理3个参数的情况，不能处理任意多个参数的情况，毫无扩展性

function curryAdd(a) {
return function(b) {
  return function(c) {
    return a+b+c
  }
}
}
const res = curryAdd(1)(2)(3)
console.log(res, 'res1')

    2. 柯里化阶段二

    • 需求：处理任意多个参数相加

    • 缺点：

      • 1. 处理相加逻辑的代码，只是在没有参数时才会执行，其他部分都在处理怎么收集所有参数，会多一次没有参数的调用

        • 更合理的方式是通过判断函数可以接收参数的总和，来判断是否参数收集完毕
      • 2. 相加逻辑可以单独抽离
      
function curryAdd() {
let params_arr = [] // 用于收集所有实参
function closure() {
  const args = Array.prototype.slice.call(arguments) // 每次调用闭包函数传入的实参，可以是多个
  if (args.length) {
    params_arr = params_arr.concat(args)
    // concat返回一个拼接过后的新数组，不改变原数组
    return closure
    // 如果还有参数，则继续返回闭包函数，则继续继续传参调用
  }
  return params_arr.reduce((total, current) => total + current)
  // 如果没有再传入参数，则相加所有传入的参数，缺点是要多一次没有参数的调用
}
return closure // 第一次调用curryAdd返回的闭包
}
const fn = curryAdd()
const res = fn(1,2)(3)(4)()
console.log(res, 'res'); // 10

    3. 柯里化阶段三

    function add(a,b,c,d,e) {
  return Array.prototype.slice.call(arguments).reduce((total, current) => total + current)
  // 注意：这里拿到的是实参的实际个数，即实参可能大于形参，当实参 (大于等于) 形参时，执行相加
}
function curryAdd(fn) {
  let paramsArr = []
  const paramsMaxLength = fn.length // function.length返回函数的形参个数，预期的参数个数为最大参数个数，即相加执行条件
  function closure() {
    const args = Array.prototype.slice.call(arguments)
    paramsArr = paramsArr.concat(args)
    if (paramsArr.length < paramsMaxLength) {
      return closure
    }
    // 当参数个数 大于等于 最大的期望个数，即形参的个数时，执行相加函数
    return fn.apply(this, paramsArr)
  }
  return closure
}
const fn = curryAdd(add)
const res = fn(1,2,3)(4)(5,6)
console.log(res, 'res');

    4.柯里化变通版

    • 上面版本的缺点：上面的版本需要知道add的参数length
    
function add() {
  return Array.from(arguments).reduce((total, current) => total + current)
}
function currentAdd(fn) {
  let paramsArr = []
  function closure() { // 该闭包函数只负责收集参数，处理相加可以在闭包上挂载新的方法getSum
    const args = Array.from(arguments)
    paramsArr = paramsArr.concat(args)
    return closure
  }
  closure.getSum = function() {
    return fn.apply(this, paramsArr) // getSum负责计算，利用了闭包中的变量paramsArr
  }
  return closure
}
const fn = currentAdd(add)
const resAdd = fn(1)(2,3)
const res = resAdd.getSum(); // 该方法的缺点就是需要单独再调用getSum函数
console.log(res, 'res')

    偏函数 partial

    • 将一个或者多个参数，固定到一个函数上，并产生返回一个更小元的函数

      function add (a, b) {
return a + b
}
function partial (fn) {...}

const addPartial = partial(add, 1)  // ------------------ 实现固定一部分参数1
const res = addPartial(2) // 3 -------------------------- 只传一部分参数 2

    偏函数实现方式1

    • <font color=red>通过bind方法实现</font>

    • bind方法绑定this指向，同时也可以传入fn的部分和全部参数，并返回一个新函数，新函数可以传入参数作为fn的剩余参数

      
function add(a,b,c,d) {
return a+b+c+d
}
function partail() {
const params = Array.prototype.slice.call(arguments)
const fn = params.shift() // 删除数组第一个元素，返回该元素，改变原数组
return fn.bind(this, ...params)
// 该params执行shift后已经改变\
// params数组展开后的所有成员，都会作为fn的参数
// 并且bind返回的新函数还可以传参
}

const fn = partail(add, 1, 2) // 固定了 1，2两个参数
const res = fn(3,4) // 除了固定的参数，剩下的参数在这里传入
console.log(res, 'res')

    偏函数实现方式2

    
function add(a,b,c,d) {
  return Array.from(arguments).reduce((total, current) => total + current)
  // 相加实参
  // 因为实参可能大于形参
}
function partialAdd(fn) {
  let paramsFixed = Array.from(arguments).slice(1)
  // 除去fn的剩余参数
  // 注意：该方法和curry很相似，current第一调用是不需要传fn参数的，声明的是空数组，而在partial中需要传固定的参数
  const paramsMaxLength = fn.length // 形参个数
  function closure() {
    const args = Array.from(arguments)
    paramsFixed = paramsFixed.concat(args)
    if (paramsFixed.length < paramsMaxLength) {
      return closure
    }
    return fn.apply(this, paramsFixed) // 大于等于时
  }
  return closure
}
const fn = partialAdd(add, 2)
const res = fn(3)(4)(5)
console.log(res, 'res') // 14

    函数记忆

    • 函数记忆：指将上次的（计算结果）缓存起来，当下次调用时，如果遇到相同的（参数），就直接返回（缓存中的数据）

    • 实现原理：将参数和对应的结果保存在对象中，再次调用时，判断对象key是否存在，存在返回缓存的值

      • 注意：函数是需要返回值的
      function memorize(fn) {
const cache = {}
return function() {
  const key = Array.prototype.join.call(arguments, ',')
  if (key in cache) {
    return cache[key]
  }
  return cache[key] = fn.apply(this, arguments)
}
}

    我的简书：https://www.jianshu.com/p/eb5...

    尾调用

    尾调用： 函数执行的最后一个步骤，是返回另一个函数的调用，叫尾调用
优点：   
1. 尾调用，当里层函数被调用时，外层函数已经执行完，出栈了，不会造成内存泄漏
2. 在递归中，尾调用使得栈中只有一个函数在运行，不会造成性能问题


f(x) {
  return g(x)
}
// 尾调用，因为返回g(x)调用的时候，f(x)已经执行完


f(x) {
  return g(x) + 1
}
// 非尾调用，因为返回 g(x) 调用时，f(x)并未执行完，当g(x)执行完后，还有执行 g(x)+1，f(x)才执行完
// 函数只有执行完后才会出栈（执行上下文调用栈）


const a = x => x ? f() : g();
// f()和g()都是尾调用

const a = () => f() || g()
// f()非尾调用，还要接着判断

const a = () => f() && g();
// f()非尾调用

    尾递归

    递归  -- 尾递归和尾调用

1. 构成递归的条件
  - 边界条件
  - 递归前进段
  - 递归返回段
  - 当边界条件不满足时，递归前进
  - 当边界条件满足时，递归返回

2. 
Recursive：递归
factorial：阶乘

3. 尾调用和非尾调用
  - 尾调用和非尾调用的区别是 执行上下文栈不一样
  - 为调用：调用在函数结尾处
  - 尾调用的执行上下文栈，外层函数执行完就出栈，不会一层一层嵌套，不造成内存溢出
  - 尾调用自身就叫尾递归
// 尾调用
// 因为调用g(x)时，f(x)已经执行完了，就会出栈，不会压栈，不会造成内存溢出
function f(x){
    return g(x);
}
// 非尾调用
// 因为调用g(x)时，f(x)并未执行完，g(x)+1需要g(x)函数执行完，才会相加，返回后f（x）才会执行完
function f(x){
    return g(x) + 1;
}



------------------------------------------------------------------------------------

+++（例1）阶乘
     // recursive递归
    function factorial (n) {
      if (n < 2) return n
      return n * factorial(n-1)
    }
    const res = factorial(3)
    // 1. 3 => 3 * factorial(2) => 3 * 2 * factorial(1) => 3 * 2 * 1  
（分析）
    1. 每次返回一个递归的函数，都会创建一个闭包
    2. 所以维护这么多执行上下文栈，开销大，用以造成内存泄漏
    3. 优化方法：尾调用


+++（例1升级）阶乘优化
    function factorial(n, res) {
      if (n === 1) {
        return res
      }
      return factorial(n-1, n * res)
    }
（分析）
    第一次：factorial（3, 4* 1）
    第二次：factorial（2, 3* 4）
    第三次：factorial（1, 2* 12）
    第四次：24


+++（例1再升级）阶乘优化，多传了一个参数，可以用函数柯里化或者偏函数来实现

    function factorial(res, n) {
      if (n === 1) return res;
      return factorial(n * res, n-1)
    }

    function curring (fn) {
      let par_arr = Array.prototype.slice.call(arguments, 1)
      const closure = function () {
        par_arr = par_arr.concat(Array.prototype.slice.call(arguments))
        console.log(par_arr, 'par_arr')
        if (par_arr.length < fn.length) {
          return closure
        }
        return fn.apply(null, par_arr)
      }
      return closure
    }
    const curringFactorial =  curring(factorial, 1)
    const res = curringFactorial(4)
    console.log(res)
    javascript前端
    woow_wu7
    10 声望2 粉丝
    « 上一篇
    [深入04] 事件循环
    下一篇 »
    [深入06] 隐式转换 和 运算符

    引用和评论

    推荐阅读
    头像
    [React 从零实践02-后台] 权限控制

    woow_wu7阅读 1.6k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新