javascript函数式编程之curry化

函数式编程是一种编程范式(编程思想，不要以为有啥模板)，主要思想是将运算过程尽量写成一系列嵌套的函数。举个例子

//声明式
let d = a + b + c * d;

//函数式
let d = add(a,add(b,mul(c,d)))

例子没有啥难度吧，那么函数式编程的函数和数学的函数有什么关系呢，其实函数式编程的函数就是数学里的函数

$y = f(x)$

对应的每一个相同的x总会得到相同的y，即纯函数的定义。

函数式还有一些特性

函数是"第一等公民": 函数可以是变量，在JavaScript中就不用解释了

没有"副作用"：即不改变函数外部状态，跟纯函数差不多，想想怎样的函数才会对相同的x有不同的y呢，当然是引用了外部变量呗，比如

let t = 1;
function f (){//不是纯函数，而且还有副作用
    let x = t;
    t--;
    return x;
}

不修改状态:给没有副作用差不多意思，不改变外部状态

引用透明性: 纯函数的定义，对于任意的相同输入，都有相同的输出

概念扯完了，来本文重点内容，函数式编程的curry

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

如果不理解就来看个例子

function add4(a,b,c,d){
   return a + b + c + d;
}
add4(1,2,3,4)//未柯里化

//那么柯里化的应该能这么用
add4_curry(1)(2)(3)(4)//柯里化

现在我们来实现一个curry化函数

我们想要的curry化函数是这样的

let add4 = curry(function(a,b,c,d) {//使用curry化函数
   return a + b + c + d;
});

add4(1)(2,3)(4);

先看es5版的

/**
 *
 * @param fn
 * @returns {function(): function()}
 */
function curry(fn) {
  var args = [], // 装总的参数的数组
      n = fn.length; //传入的函数的参数个数
  return function core() { //返回一个接任意个参数的函数
    var arg = [].slice.call(arguments); //获取当前函数的参数
    args = args.concat(arg);
    n -= arg.length;
    return n === 0 ? fn.apply(null, args) : core;
  }
}

//使用如下
var add4 = curry(function (a, b, c, d) {
  return a + b + c + d;
});
console.log(add4(1, 2)(2)(3));

认真看，应该能看懂

然后再来个es6版的


const curry = (fn, n = fn.length, args = []) => n === 0 ? fn(...args) : (...args1) => curry(fn, n - args1.length, [...args, ...args1]);

//举例
const add5 = curry((a, b, c, d, e) => a + b + c + d + e);

console.log(add5(1, 2)(3, 4)(5));

感谢es6提供的箭头函数和...运算符以及函数默认参数，才能把curry函数一行就写完，其实原理和es5版差不多。

现在来说说函数式编程的curry化到底有什么用，第一个用途，参数记忆，即对于多参数的函数我可以记忆前面的参数

比如

//add4的例子
let add1 = add4(1,2,3)
add1(4)//输出10
add1(5)//输出11
add1(6)//输出12

可以看到，我把add4的参数1,2,3给记忆下来了，然后如果其他地方得用到参数1，2，3的话就没必要写了，这部分的其他应用就留给读者去实践了。

第二Function.prototype.bind的实现，学过react的人绝对熟悉这个东西，而Funtion.prototype.bind的实现也利用了curry化的原理，不妨来实现个bind函数

Function.prototype.bind = function () {
  var args = [].slice.call(arguments);//第一部分参数
  var that = args.shift();//第一个参数为待绑定的this
  var fn = this;//当前调用bind的函数
  return function () {//curry化
    var args1 = [].slice.call(arguments);//第二部分参数
    return fn.apply(that, args.concat(args1));
  }
};

//使用一下
function test(a,b) {
  console.log(this,a,b);
}
var t = test.bind({a:1,b:2},1);
t(2);

不过往原型上加东西通常是不好的，所有还是写个bind 函数吧

function bind(fn) {
  var args = [].slice.call(arguments);
  args.shift();//除去fn
  var that = args.shift();//this参数
  return function () {
    var args1 = [].slice.call(arguments);//第二部分参数
    return fn.apply(that, args.concat(args1));
  }
}

var getById = bind(document.getElementById, document);
getById("name");

函数式编程在react,redux等一些前端框架中使用非常广泛，建议读者可以好好学习一下这方面知识。

关于函数式编程还有偏函数，函数组合，管道，函子等很多内容，后面我的博客会慢慢补上。

javascript函数式编程之curry化

猜你喜欢