javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript 柯里化

深入理解JavaScript柯里化的概念和原理

作者：墨渊君

在JS编程中, 函数是一等公民, 具备了强大的灵活性和复用性，而柯里化作为一种高阶技术, 可以进一步提升函数的复用性和灵活性，在本篇博客中, 我们将深入探讨 JS 中柯里化的概念和原理, 并了解其在实际开发中的应用场景,需要的朋友可以参考下

引言

在 JS 编程中, 函数是一等公民, 具备了强大的灵活性和复用性。而 柯里化 作为一种高阶技术, 可以进一步提升函数的复用性和灵活性。通过柯里化, 可以大大简化函数的调用方式, 并创建更加灵活和可复用的函数

在本篇博客中, 我们将深入探讨 JS 中柯里化的概念和原理, 并了解其在实际开发中的应用场景。通过学习柯里化, 您将能够编写出更加简洁、可读性更高且易于维护的代码, 提升自己的 JS 编程技能

让我们开始探索 JS 柯里化的奇妙世界吧！

一、什么是柯里化

柯里化 (Currying), 又称 部分求值 (Partial Evaluation), 是函数编程的一种高级技巧, 通常只需要传递给函数 一部分参数 来调用它, 让它返回一个新的函数去 处理剩下的参数

如下 👇🏻 代码, sum 是一个常规求和函数, sumCurry 则是使用 柯里化 思想编写的一个求和函数, 它们区别就很明显了, sum 在执行时需要一次性进行传参, 但是 sumCurry 则不是, 它可以进行进行 分批传入参数

// 常规求和函数
const sum = (a, b) => {
  console.log(a + b)
}
sum(1, 2) // 3
// 使用「柯里化」思想编写的一个求和函数
const sumCurry = (a) => (b) => {
  console.log(a + b)
}
sumCurry(1)(2) // 3

补充说明: 柯里化 是函数高级技巧, 允许分批次处理参数, 很多文章更多讨论的是如何将一个普通函数转为 柯里化 函数, 我们需要将这两者区分开来, 柯里化 并不是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c) 这个过程, 而是指转换后的函数被称为 柯里化

二、柯里化作用

柯里化 的优势在于它为函数提供了更高的 灵活性 和 复用性, 我们可以先提供部分函数参数, 并在后续调用中根据需要提供剩余的参数, 这种灵活性使得代码更具可读性、可维护性, 并且能够创建具有不同功能的相关函数, 下面我来看几个具体的例子, 感受下 柯里化 的魅力

2.1 参数复用

如下代码, sumCurry 是 柯里化 函数, 同时存在变量 age, 基于 age 我们调用了函数 sumCurry 获得到一个新的函数 addAge, 在后面我们可以随时调用该函数, 基于最初给的的参数 age 追加数值

// 使用「柯里化」思想编写的一个求和函数
const sumCurry = (a) => (b) => {
  console.log(a + b)
}
const age = 18
const addAge = sumCurry(age)
addAge(1) // 19
addAge(10) // 28
addAge(8) // 26
addAge(0) // 18

2.2 函数复用

下面我们有这么一个需求, 需要抽取对象数组中 name 属性, 并返回一个数组, 可实现代码如下:

const users = [
  { name: 'lh', age: 18 },
  { name: 'myj', age: 28 },
  { name: 'jl', age: 20 },
]
const names = users.map(v => v.name)
console.log(names) // ['lh', 'myj', 'jl']

上面 👆🏻 代码通过 map 来抽取数组对象中的 name 的属性, 接下来我们尝试使用 柯里化 对代码进行简单的优化:

// 使用「柯里化」创建一个提供 map 使用的、可复用函数 
const prop = (key) => (obj) => obj[key]
const users = [
  { name: 'lh', age: 18 },
  { name: 'myj', age: 28 },
  { name: 'jl', age: 20 },
]
const names = users.map(prop('name'))
console.log(names) // ['lh', 'myj', 'jl']

上面代码很简单, 但却是 柯里化 的一个实践, 有了 prop 函数, 我们就可以很方便的, 抽取对象数组中指定元素, 而且在代码阅读上也相对来说清晰很多, 比如在上面基础之上我们想要获取所有 age 只需要这么编写即可:

const ages = users.map(prop('age'))

2.3 提前计算

如下代码, 是常见的一种兼容性代码的写法, 代码中通过判断 addEventListener 以及 attachEvent 为现代浏览器或 IE 浏览器的事件添加方法

const addEvent = (el, type, fn, capture) => {
  if (window.addEventListener) {
    el.addEventListener(type, (e) => {
      fn.call(el, e);
    }, capture);
  } else if (window.attachEvent) {
    el.attachEvent("on" + type, (e) => {
      fn.call(el, e);
    });
  } 
};

上面 👆🏻 代码写法没啥毛病, 中规中距, 唯一的毛病可能就是在每次执行 addEvent 时都需要进行一次判断, 这里我们就可以通过 柯里化 改造下, 提前 对兼容性进行判断, 最后返回添加事件的一个 主体方法

// 柯里化, 提前计算, 返回主体方法
const useEvent = () => {
  if (window.addEventListener) {
    return (el, sType, fn, capture) => {
      el.addEventListener(sType, (e) => {
        fn.call(el, e);
      }, (capture));
    };
  } else if (window.attachEvent) {
    return (el, sType, fn, capture) => {
      el.attachEvent("on" + sType, (e) => {
        fn.call(el, e);
      });
    };
  }
}
const addEvent = useEvent()

2.4 延迟计算(运行)

延迟计算其实也好理解, 就是每次函数执行都会 收集一部分参数, 直到所有参数都准备完毕, 才会进行计算, 如下代码:

// 使用「柯里化」思想编写的一个求和函数
const sumCurry = (a) => (b) => (c) => (d) => {
  console.log(a + b + c + d)
}
sumCurry(1)(2)(3)(4) // 10

三、普通函数如果转换为「柯里化」

接下来我们尝试写一个转换函数 curry, 通过它我们可以将普通函数 f(a, b, c, d) 转为柯里化函数 f(a)(b)(c), 转换后 柯里化 函数的 精髓 在于: 接收一部分参数, 返回一个函数接收剩余参数, 当接收到足够参数后, 执行原函数

如下代码所示, 我们实现了简单的一个转换函数 curry, _curry 是个中转函数, 也是重点:

/**
 * 中转函数
 * @param fun           待柯里化的原函数
 * @param allArgs       已接收的参数列表
 * @returns {Function}  返回一个接收剩余参数的函数  
 */
const _curry = (fun, ...allArgs) => {
  // 1. 返回一个接收剩余参数的函数    
  return (...currentArgs) => {
    // 2. 当前接收到的所有参数
    const _args = [...allArgs, ...currentArgs] 
    // 3. 接收到的参数大于或等于函数本身的参数时, 执行原函数
    if (_args.length >= fun.length) {
      return fun.call(this, ..._args)
    }
    // 4. 继续执行 _curry 返回一个接收剩余参数的函数 
    return _curry.call(this, fun, ..._args)
  }
}
/**
 * 将函数柯里化
 * @param fun  待柯里化的原函数
 * @returns {Function} 返回「柯里化」函数
 */
const curry = (fun) => _curry.call(this, fun)
// 测试
const sum = (a, b, c) => (a + b + c) // 原函数
const currySum = curry(sum) // 柯里化 函数
currySum(1)(2)(3) // 6
currySum(1)(2, 3) // 6
currySum(1, 2, 3) // 6

四、参数个数不定

下面我们回到 柯里化 本身, 还记得我们上文写的 sumCurry 函数吗? 该 柯里化 函数每次调用都只能传一个参数

// 使用「柯里化」思想编写的一个求和函数
const sumCurry = (a) => (b) => {
  return a + b
}
sumCurry(1)(2) // 3

这里我们对 sumCurry 进行改造, 允许在每次调用时传递任意个数参数

// 使用「柯里化」思想编写的一个求和函数
const sumCurry = (...preArgs) => (...nextArgs) => {
  return [...preArgs, ...nextArgs].reduce((total, ele) => (total + ele), 0)
}
sumCurry(1, 2, 3)() // 6
sumCurry(1, 2, 3)(4) // 10
sumCurry()(1, 4) // 5
sumCurry(1)(2) // 3

五、无限参数

上文我们所演示的 柯里化 函数允许被 连续调用次数 是固定的, 如果我们要实现一个可以 无限调用 的柯里化函数又该怎么处理呢? 实现原理其实也简单, 重点就以下两点:

// 使用「柯里化」思想编写的一个求和函数
const sumCurry =  (...preArgs) => {
  // 1. 计算当前结果
  const preTotal = preArgs.reduce((total, ele) => (total + ele), 0)
  // 2. 使用 bind, 基于原函数创建新函数, 并将上一次结果作为第一个参数
  const _sumCurry = sumCurry.bind(this, preTotal)
  // 3. 修改 toString 返回值, 用于值值
  _sumCurry.toString = () => preTotal
  return _sumCurry
}
// 使用 + 强制调用 toString 方法
console.log(+sumCurry(1)) // 1
console.log(+sumCurry(1, 2, 3)) // 6
console.log(+sumCurry(1)(2)) // 3
console.log(+sumCurry(1)(2)(3)(4)(5)) // 15
console.log(+sumCurry(1)()(3)(4)(5)) // 13

六、柯里化和闭包的关系

闭包 和 柯里化 是两个不同的概念, 但它们之间有一定的关联:

// 形成闭包, 返回的新函数, 允许访问父级函数的变量 a
const sumCurry = (a) => (b) => {
  console.log(a + b)
}

到此这篇关于深入理解JavaScript柯里化的概念和原理的文章就介绍到这了,更多相关JavaScript 柯里化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文