函数柯里化

函数柯里化的基本概念

函数柯里化是一种将多参数函数转换为一系列单参数函数的技术。它由数学家Haskell Curry命名，核心思想是把接受多个参数的函数变换成接受单一参数的函数，并且返回接受余下参数的新函数。这种技术让函数变得更灵活，能够实现参数复用和延迟执行。

// 普通加法函数
function add(a, b) {
  return a + b
}

// 柯里化后的加法函数
function curriedAdd(a) {
  return function(b) {
    return a + b
  }
}

console.log(add(1, 2)) // 3
console.log(curriedAdd(1)(2)) // 3

柯里化的实现原理

实现柯里化的关键在于函数能够记住之前传入的参数。JavaScript中可以通过闭包来实现这一特性。当外层函数返回内层函数时，内层函数能够访问外层函数的参数，即使外层函数已经执行完毕。

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args)
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2))
      }
    }
  }
}

// 使用示例
function sum(a, b, c) {
  return a + b + c
}

const curriedSum = curry(sum)
console.log(curriedSum(1)(2)(3)) // 6
console.log(curriedSum(1, 2)(3)) // 6
console.log(curriedSum(1)(2, 3)) // 6

柯里化的实际应用场景

柯里化在前端开发中有多种实用场景，特别是在需要部分应用参数或创建特定功能函数时非常有用。

参数复用

// 创建特定前缀的日志函数
function log(level, message) {
  console.log(`[${level}] ${message}`)
}

const curriedLog = curry(log)
const debugLog = curriedLog('DEBUG')
const errorLog = curriedLog('ERROR')

debugLog('This is a debug message') // [DEBUG] This is a debug message
errorLog('Something went wrong!') // [ERROR] Something went wrong!

事件处理

// 处理点击事件
function handleClick(elementId, event) {
  console.log(`Clicked element ${elementId}`, event)
}

const curriedHandleClick = curry(handleClick)
document.getElementById('btn1').addEventListener('click', curriedHandleClick('button1'))
document.getElementById('btn2').addEventListener('click', curriedHandleClick('button2'))

高级柯里化技巧

无限柯里化

有时候我们需要处理参数数量不固定的函数，这时可以实现无限柯里化。

function infiniteCurry(fn) {
  return function curried(...args) {
    return function(...args2) {
      if (args2.length === 0) {
        return args.reduce(fn)
      }
      return curried(...args, ...args2)
    }
  }
}

const add = infiniteCurry((a, b) => a + b)
console.log(add(1)(2)(3)(4)()) // 10

占位符功能

通过引入占位符，可以实现更灵活的柯里化参数传递。

function curryWithPlaceholder(fn) {
  return function curried(...args) {
    // 过滤掉占位符
    const actualArgs = args.filter(arg => arg !== curryWithPlaceholder._)
    
    if (actualArgs.length >= fn.length) {
      return fn.apply(this, args.map(arg => arg === curryWithPlaceholder._ ? undefined : arg))
    } else {
      return function(...args2) {
        // 替换占位符
        const combinedArgs = args.map(arg => arg === curryWithPlaceholder._ && args2.length ? args2.shift() : arg)
        return curried.apply(this, [...combinedArgs, ...args2])
      }
    }
  }
}

curryWithPlaceholder._ = Symbol('placeholder')

// 使用示例
function formatDate(year, month, day) {
  return `${year}-${month}-${day}`
}

const curriedFormat = curryWithPlaceholder(formatDate)
const formatWithYear = curriedFormat(2023)
const formatWithYearAndDay = formatWithYear(curryWithPlaceholder._, 15)

console.log(formatWithYearAndDay(6)) // "2023-6-15"

柯里化的性能考量

虽然柯里化提供了很多便利，但也需要考虑其性能影响。每次柯里化都会创建新的函数对象，在性能敏感的场景中可能会成为瓶颈。

// 性能测试示例
function testPerformance() {
  const start = performance.now()
  
  // 普通函数调用
  for (let i = 0; i < 1000000; i++) {
    add(i, i+1)
  }
  
  const mid = performance.now()
  
  // 柯里化函数调用
  for (let i = 0; i < 1000000; i++) {
    curriedAdd(i)(i+1)
  }
  
  const end = performance.now()
  
  console.log(`普通函数: ${mid - start}ms`)
  console.log(`柯里化函数: ${end - mid}ms`)
}

testPerformance()

柯里化与部分应用的比较

柯里化常与部分应用(Partial Application)混淆，但两者有本质区别。部分应用是固定函数的部分参数，而柯里化是将多参数函数转换为嵌套的单参数函数。

// 部分应用实现
function partial(fn, ...presetArgs) {
  return function(...laterArgs) {
    return fn(...presetArgs, ...laterArgs)
  }
}

// 使用示例
function greet(greeting, name, punctuation) {
  return `${greeting}, ${name}${punctuation}`
}

const sayHello = partial(greet, 'Hello')
const sayHelloToJohn = partial(greet, 'Hello', 'John')

console.log(sayHello('Jane', '!')) // "Hello, Jane!"
console.log(sayHelloToJohn('!')) // "Hello, John!"

函数组合中的柯里化

柯里化在函数式编程中常与函数组合一起使用，可以创建更强大的功能管道。

// 函数组合工具
function compose(...fns) {
  return function(x) {
    return fns.reduceRight((acc, fn) => fn(acc), x)
  }
}

// 柯里化后的工具函数
const toUpper = str => str.toUpperCase()
const exclaim = str => `${str}!`
const greet = name => `Hello, ${name}`

// 组合使用
const loudGreeting = compose(exclaim, toUpper, greet)

console.log(loudGreeting('John')) // "HELLO, JOHN!"

现代JavaScript中的柯里化

ES6的箭头函数让柯里化的实现更加简洁。

// 使用箭头函数的柯里化
const curry = fn => 
  (...args) => 
    args.length >= fn.length 
      ? fn(...args)
      : (...args2) => curry(fn)(...args, ...args2)

// 更简洁的柯里化函数
const multiply = a => b => a * b
const double = multiply(2)
const triple = multiply(3)

console.log(double(5)) // 10
console.log(triple(5)) // 15

柯里化在React中的应用

React的函数组件和Hooks与柯里化配合良好，可以创建更灵活的组件逻辑。

// 柯里化的事件处理器
const withClickHandler = handler => Component => props => (
  <Component {...props} onClick={handler(props)} />
)

// 使用示例
const UserCard = ({ user, onClick }) => (
  <div onClick={onClick}>
    <h3>{user.name}</h3>
    <p>{user.email}</p>
  </div>
)

const handleUserClick = ({ user }) => () => {
  console.log('User clicked:', user.id)
}

const EnhancedUserCard = withClickHandler(handleUserClick)(UserCard)

// 在组件中使用
function UserList({ users }) {
  return (
    <div>
      {users.map(user => (
        <EnhancedUserCard key={user.id} user={user} />
      ))}
    </div>
  )
}

柯里化的数学基础

柯里化源于数学中的范畴论，它展示了函数与参数之间的关系。在数学上，柯里化建立了多参数函数与高阶单参数函数之间的等价关系。

// 数学上的柯里化
// f: (X × Y) → Z
// curry(f): X → (Y → Z)

// 实现数学上的加法
const mathAdd = (a, b) => a + b
const curriedMathAdd = a => b => a + b

// 这两个函数在数学上是等价的
console.log(mathAdd(2, 3) === curriedMathAdd(2)(3)) // true

柯里化的变体实现

根据不同需求，柯里化可以有多种实现方式。

自动柯里化

function autoCurry(fn, arity = fn.length) {
  return function curried(...args) {
    if (args.length >= arity) return fn(...args)
    return autoCurry(fn.bind(null, ...args), arity - args.length)
  }
}

// 使用示例
const autoCurriedSum = autoCurry((a, b, c) => a + b + c)
console.log(autoCurriedSum(1)(2)(3)) // 6
console.log(autoCurriedSum(1, 2)(3)) // 6
console.log(autoCurriedSum(1)(2, 3)) // 6

反向柯里化

function reverseCurry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args)
    } else {
      return function(...args2) {
        return curried.apply(this, [...args2, ...args])
      }
    }
  }
}

// 使用示例
const reverseCurriedJoin = reverseCurry((a, b, c) => [a, b, c].join('-'))
console.log(reverseCurriedJoin('a')('b')('c')) // "a-b-c"
console.log(reverseCurriedJoin('a', 'b')('c')) // "c-a-b"