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

// 常规求和函数
const sum = (a, b) => {
  console.log(a + b)
}
sum(1, 2) // 3

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

// 使用「柯里化」思想编写的一个求和函数
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

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 使用的、可复用函数 
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']

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

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);
    });
  } 
};

// 柯里化, 提前计算, 返回主体方法
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()

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

/**
 * 中转函数
 * @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

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

// 使用「柯里化」思想编写的一个求和函数
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)
}