于永雨的学习笔记
  • 学海无涯
  • 前端基础
    • HTML
      • 语义化标签
      • script标签中defer和async
      • 本地存储
      • 拖拽
      • Web Workers
      • WebSocket
    • CSS
      • 盒模型和box-sizing
      • BFC(块级格式化上下文)
      • 浮动和清除浮动
      • 伪类和伪元素
      • 2倍图、3倍图
      • flex
      • 水平居中、垂直居中
      • 经典布局
        • 两列布局
        • 三列布局
      • 经典实践
      • CSS样式隔离
      • Less vs Sass
    • JavaScript
      • ES
        • 数据类型
          • 1-string
          • 2-number
          • 3-boolean
          • 4-null
          • 5-undefined
          • 6-symbol
          • 7-object
          • 常见类型判断
          • 浅拷贝、深拷贝
        • 数据集合
          • Array
          • 类数组对象
          • Map、WeakMap
          • Set、WeakSet
          • 常见遍历方式
        • 变量
          • 修饰符
          • 变量提升
        • 函数
          • apply、call、bind
          • new
          • this
          • 箭头函数
          • 闭包
          • 防抖和节流
          • 柯里化
        • 原型
          • 原型链
        • 异步
          • 单线程&事件循环
          • 常见异步
          • Promise
            • all和allSettled
            • race和any
            • resolve和reject
        • 模块化
        • 版本特性一览表
      • DOM
        • DOM事件
        • 事件分类
      • BOM
    • TypeScript
    • 浏览器
      • 页面渲染
      • 重绘和回流
      • 跨域
      • 垃圾回收
      • 取消请求
    • Web API
      • EventSource
      • XMLHttpRequest
      • WebSocket
      • IntersectionObserver
  • 前端框架
    • Vue
      • 2.0
        • 列表渲染的key
        • 生命周期
        • diff算法
      • 3.0
        • 改变
        • provide/inject
        • 组件间可复用逻辑封装
        • diff算法
    • React
      • Component
      • Props
      • State
      • Context
      • Effect
      • Hooks
        • hook依赖列表
        • useMemo
        • useCallback
        • useEffect
      • API
        • memo
      • 子组件的无效渲染
      • 组件在开发模式下渲染两次
    • Vue-Router
    • Taro
    • Qiankun
  • 前端方案
    • 错误上报
    • 性能优化
    • 长列表优化原理
    • H5移动端适配
  • 工程化
    • 前端
      • 防止package-lock.json删除
      • 打包ESM和CommonJS
      • babel
      • webpack
      • pnpm
      • 多包管理
      • vite
      • 各种base
    • 服务端
      • Maven
  • 小程序
    • 小程序历史
    • 双线程架构
    • 生命周期
    • 更新机制
  • 服务端
    • Redis
    • Node.js
      • 核心
      • 进程守护
      • Koa
    • Java
      • 安装与配置
    • Restful API
  • DevOps
    • Nginx
    • Docker
      • 核心概念
      • 基础命令
    • K8s
    • Linux
      • shell及脚本
      • 文件目录操作
      • vi/vim
  • 计算机基础
    • 数据结构
      • 栈(Stack)
      • 队列(Queue)
      • 数组(Array)
      • 链表(Linked List)
      • 树(Tree)
      • 图(Graph)
      • 堆(Heap)
      • 散列表(Hash Table)
    • 算法
      • 查找
      • 排序
  • 计算机网络
    • 基础
    • TCP
      • 建立连接(三次握手)
      • 断开连接(四次挥手)
    • UDP
    • HTTP
      • HTTP/2
      • HTTPS
    • 常见网络攻击
      • XSS
      • CSRF
      • DDos
      • MITM
    • 浏览器缓存
  • 经典面试题
    • 箭头函数this-1
    • 箭头函数this-2
    • 数组转树
    • 控制并发数
    • 动态规划-二维数组全排列
    • 柯里化
Powered by GitBook
On this page
  • 一、概念
  • 二、实现
  • 形参定长:
  • 形参不定长:
  • 三、应用
  • 1、参数复用
  • 2、兼容逻辑提前确认
  • 3、延迟执行
  1. 前端基础
  2. JavaScript
  3. ES
  4. 函数

柯里化

一、概念

柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。

要点:

  1. 将多参数的函数进行变换,让其变成每次只接受1个参数

  2. 返回一个新函数,此函数可以接受余下的参数,并且返回结果

柯里化是一个逐步接收参数的过程。

为啥要柯里化?

Function.protoype.bind就是一个柯里化的实现

二、实现

形参定长:

function curry(fn){
  let allArgs = [];

  return function next(...args){
    allArgs = allArgs.concat(...args)

    if(fn.length === allArgs.length){
      const result = fn(...allArgs);
      allArgs = []; // 结果计算完后要清空参数容器,避免柯里化后的函数再次调用后受影响
      return result
    }else{
      return next
    }
  }
}


function add(a, b, c){
  return a+ b+c
}
console.log(add(1,2,3))

let curryingAdd = curry(add);
console.log(curryingAdd(1,2,3));
console.log(curryingAdd(1)(2,3));
console.log(curryingAdd(1)(2)(3));

形参不定长:

(待补充,目前没有看到比较完美实现)

难点:不确定函数什么时候调用结束,所以,柯里化内部实现的时候,无法判断是直接返回结果还是继续返回函数。

一种思路是通过改写toString或valueOf,但验证并不可行。

function curry(fn){
  let allArgs = [];

  function next(){
    allArgs = allArgs.concat(...arguments)
    return next
  }

  next.toString = next.valueOf = function(){
    return fn(allArgs)
  }

  return next
}

三、应用

1、参数复用

常规实现:

function check(reg, text) {
    return reg.test(text)
}

console.log(check(/\d+/g, 'test'));
console.log(check(/[a-z]+/g, 'test'));

柯里化实现:

function curryingCheck(reg) {
    return function (text) {
        return reg.test(text)
    }
}

let check = curryingCheck(/\d+/g)
let checkLetter = curryingCheck(/[a-z]+/g)

console.log(checkNumber('test'));
console.log(checkLetter('test123'));

2、兼容逻辑提前确认

常规实现:

const on = function (ele, eventName, handler) {
  if (document.addEventListener) {
    ele.addEventListener(eventName, handler, false);
  } else {
    ele.attachEvent("on" + eventName, handler);
  }
};

on(document.querySelector(".demoe"), "click", () => console.log("clicked"));

柯里化实现:只需要做一次兼容判断,无需每次调用都判断

const curry = function () {
  if (document.addEventListener) {
    return (ele, eventName, handler) => ele.addEventListener(eventName, handler, false);
  } else {
    return (ele, eventName, handler) => ele.attachEvent("on" + eventName, handler);
  }
};

const curringOn = curry();
curringOn(document.querySelector(".demoe"), "click", () => console.log("clicked"));

3、延迟执行

Function.prototype.myBind = function(context){
    let _this = this;

    return function(...args){
        return _this.apply(context, args)
    }
}

function sum(x, y, z){
    return x + y + z
}

let newSum = sum.myBind(null)

console.log(newSum(1, 2, 3))

参考:

Previous防抖和节流Next原型

Last updated 1 year ago

https://zh.javascript.info/currying-partials
https://juejin.cn/post/6864378349512065038#heading-27
https://juejin.cn/post/6844903882208837645