函数式编程离我们有多远？

发表于 5年以前 | 总阅读数：2490 次

函数式编程（Functional Programming）其实相对于计算机的历史而言是一个非常古老的概念，甚至早于第一台计算机的诞生。函数式编程的基础模型来源于 λ 演算，而 λ 演算并非设计于在计算机上执行，它是由 Alonzo Church 和 Stephen Cole Kleene 在 20 世纪三十年代引入的一套用于研究函数定义、函数应用和递归的形式系统。

functional programming

随着计算机语言、Web和前端的发展，JavaScript这门语言被越来越广泛地使用。作为现代编程语言的代表作之一的JavaScript，与和它具有相似性的一些现代编程语言一样，都有着函数式的某些特性，以至于 Douglas Crockford 在他写的《JavaScript : The Good Parts》中说，JavaScript 是披着 C 外衣的 Lisp。

函数式编程究竟是什么

函数式编程是一种编程思想或者说编程泛型，网上的各种资料和技术书籍中都会有对它的基本定义。根据基本定义，通常情况下，函数式编程强调函数计算本身，而不是如同经典的命令式编程模型那样强调指令执行。

以上定义只是定义，就像面向对象编程的定义是将计算机程序用单个能够起到子程序作用的单元或对象组合而成。这种定义总是正确的，但有时候无助于我们真正理解它，因此我们还是需要通过代码来理解。

如同面向过程和面向对象一样，函数式编程思想体现在代码上，会带有明显的特征，以至于我们可以将这种编程思想同程序的其他部分区别开来。但这里我并不是要谈标准的、纯粹的或者规范的"函数式"风格，那是一种类似于LISP或者Scheme语言的风格，显然并不适合于JavaScript或者类似于JavaScript的现代编程语言。就像我们讨论面向对象不必强调纯粹性一样，我们在实际工作中很少用到单一的纯粹的泛型，通常情况下都是几种模型混合使用。如同面向对象和面向过程不可分割一样，函数式、面向对象和面向过程的编程泛型常常混合于我们的代码中，如果不去刻意区分它们，很难将它们彻底独立开来。

先来看一段简单的示例代码：

function add(x, y){
        return x + y;
    }

    function mul(x, y){
        return x * y;
    }

    function concat(arr1, arr2){
        return arr1.concat(arr2);
    }

    console.log(add(1, add(2, 3)),     //6
        mul(1, mul(2, mul(3, 4))),        //24
        concat([1, 2], concat([3, 4], [5, 6]))); //[1,2,3,4,5,6]

上面的代码中，我们有 3 个简单的函数，用来计算两个数的和、积以及两个数组的连接。我们看到，当我们要对两个以上的数进行操作的时候，调用起来略显繁琐，所以我们可以对它们进行一系列修改，使得它们支持多个数连续的操作：

版本1

function add(...args){
        return args.reduce((x, y) => x + y);
    }

    function mul(...args){
        return args.reduce((x, y) => x * y);
    }

    function concat(...args){
        return args.reduce((arr1, arr2) => arr1.concat(arr2));
    }

    console.log(add(1, 2, 3),     //6
        mul(1, 2, 3, 4),        //24
        concat([1, 2], [3, 4], [5, 6])); //[1,2,3,4,5,6]

上面的代码通过对三个函数的分别修改，将它们改造成了支持多个操作数的版本，实现了我们简化函数调用的目的。不过，这不是一种足够聪明的做法，因为如果我们还有更多类似函数，我们还得对这些函数进行一一的改写。

注意到，我们完全可以一次性抽取出一个通用的版本 reduce ，它的作用是当任意两个参数的函数如果传入多余2个函数时，用这些参数进行 reduce 迭代：

版本二

function reduce(fn, ...args){
        return args.reduce(fn);
    }

    function add(x, y){
        return x + y;
    }

    function mul(x, y){
        return x * y;
    }

    function concat(arr1, arr2){
        return arr1.concat(arr2);
    }

    console.log(reduce(add, 1, 2, 3),     //6
        reduce(mul, 1, 2, 3, 4),        //24
        reduce(concat, [1, 2], [3, 4], [5, 6])); //[1,2,3,4,5,6]

上面的代码好处是显而易见，我们不再需要对 add、mul、concat 分别进行修改，并且 reduce 可以应用在任何一个两个参数的函数上。不过呢，我们还是修改了函数调用的过程，改变了调用的函数和参数。然而，我们可以进一步进行优化：

版本三

function reduce(fn, ...args){
        return args.reduce(fn);
    }

    function add(x, y){
        return x + y;
    }

    function mul(x, y){
        return x * y;
    }

    function concat(arr1, arr2){
        return arr1.concat(arr2);
    }

    add = reduce.bind(null, add);
    mul = reduce.bind(null, mul);
    concat = reduce.bind(null, concat);

    console.log(add(1, 2, 3),     //6
        mul(1, 2, 3, 4),        //24
        concat([1, 2], [3, 4], [5, 6])); //[1,2,3,4,5,6]

在这里，我们利用 reduce 和 bind 方法改变了 add、mul 和 concat。当然我们这么做带来一个小小的副作用，那就是 this 被限定为 null。我们还有更好的做法：

版本四

function reduce(fn){
        return function(...args){
            return args.reduce(fn.bind(this));
        }
    }

    function add(x, y){
        return x + y;
    }

    function mul(x, y){
        return x * y;
    }

    function concat(arr1, arr2){
        return arr1.concat(arr2);
    }

    add = reduce(add);
    mul = reduce(mul);
    concat = reduce(concat);

    console.log(add(1, 2, 3),     //6
        mul(1, 2, 3, 4),        //24
        concat([1, 2], [3, 4], [5, 6])); //[1,2,3,4,5,6]

在这个版本中，我们干脆让 reduce 返回 function，实际上我们相当于让 reduce 对函数进行了变换。我们可以这样理解，函数变换基于原始函数包装了一个新的函数，新的函数在原始函数的基础上具备某些增强的能力。在这里我们得到了一颗函数式编程的"糖果"----我们可以像操作数据那样操作一组函数，使得这些函数具备某些新的能力。而这，就是过程抽象的基本思想。这些变换函数的函数我们称之为"高阶函数"。

procedural abstraction

上面的代码我们是否还能进一步优化？事实上还是可以，如果 reduce 的函数是异步的，那么我们前面的函数是处理不了的，因此我们可以再设计一下 reduce，让它支持异步函数：

function reduce(fn, async){
      if(async){
        return function(...args){
          return args.reduce((a, b)=>{
            return Promise.resolve(a).then((v)=>fn.call(this, v, b));
          });
        }
      }else{
        return function(...args){
          return args.reduce(fn.bind(this));
        }
      }
    }

    function add(x, y){
      return x + y;
    }

    function mul(x, y){
      return x * y;
    }

    function concat(arr1, arr2){
      return arr1.concat(arr2);
    }

    function asyncAdd(x, y){
      return new Promise((resolve, reject)=>{
        setTimeout(()=> resolve(x+y), 100); 
      });
    }

    add = reduce(add);
    mul = reduce(mul);
    concat = reduce(concat);

    console.log(add(1, 2, 3),   //6
      mul(1, 2, 3, 4),    //24
      concat([1, 2], [3, 4], [5, 6])); //[1,2,3,4,5,6]

    asyncAdd = reduce(asyncAdd, true);
    asyncAdd(1, 2, 3).then((v)=>console.log(v));

过程抽象的具体应用

函数调用的频度控制

在实际项目中，我们有时候会遇到限制某函数调用频率的需求。例如，防止一个按钮短时间的的重复点击，防止 resize、scroll 和 mousemove 事件过于频繁地触发等。

throttle

throttle 可以限制函数调用的频率，常用来防止按钮被重复点击。

//限制button在500ms内只能被点击一次
    $("#btn").click(throttle(function(evt){
        do sth.
    }, 500);

throttle 的简单实现

function throttle(fn, wait){
        var timer;
        return function(...args){
            if(!timer){
                timer = setTimeout(()=>timer=null, wait);
                return fn.apply(this, args);
            }
        }
    }

    //按钮每500ms一次点击有效
    btn.onclick = throttle(function(){
        console.log("button clicked");
    }, 500);

debounce

有时候我们希望函数在某些操作执行完成之后被触发。例如，实现搜索框的 Suggest 效果，如果数据是从服务器端读取的，为了限制从服务器读取数据的频率，我们可以等待用户输入结束 100ms 之后再触发 Suggest 查询：

searchBox.addEventListener("input", debounce(function(){
        loadSuggestion();
    }, 100));

debouce 的简单实现：

function debounce(fn, delay){
        var timer = null;
        return function(...args){
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, args), delay);
        }
    }

    window.addEventListener("scroll", debounce(function(){
        console.log("scrolled");
    }, 500));

DOM的批量操作

jQuery 的语法糖特点包括批量操作与链式调用。我们可以看一下，实际上用函数式的过程抽象思想很容易实现类似的"语法糖"。我们先考虑如何支持函数的"批量操作"。

function multicast(fn){
      return function(list, ...args){
        if(Array.isArray(list)){
          return list.map((item)=>fn.apply(this, [item,...args]));
        }else{
          return fn.apply(this, [list,...args]);
        }
      }
    }

    function add(x, y){
        return x + y;
    }

    add = multicast(add);

    console.log(add([1,2,3], 4)); //5,6,7

有了 multicast，我们来尝试用它批量操作一个 ul 中的 li 元素：

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>

function multicast(fn){
      return function(list, ...args){
        if(Array.isArray(list)){
          return list.map((item)=>fn.apply(this, [item,...args]));
        }else{
          return fn.apply(this, [list,...args]);
        }
      }
    }

    function setColor(el, color){
      return el.style.color = color;
    }

    setColor = multicast(setColor);

    var list = document.querySelectorAll("li:nth-child(2n+1)");
    setColor(Array.from(list), "red");

演示例子

Wrapper and decorators

我们可以对上面的例子进行进一步的处理，添加对 selector 参数的支持。这一次，我们使用一个叫做 wrap 的新的高阶函数，它可以对原始函数的参数和返回值进行再包装。

function multicast(fn){
      return function(list, ...args){
        if(Array.isArray(list)){
          return list.map((item)=>fn.apply(this, [item,...args]));
        }else{
          return fn.apply(this, [list,...args]);
        }
      }
    }

    function wrap(fn, before, after){
      return function(...args){
        if(before){
            args = before.apply(this, args);
        }
        let ret = fn.apply(this, args);
        if(after){
            ret = after.call(this, [ret, ...args]);
        }
        return ret;
      }
    }

    function setColor(el, color){
      return el.style.color = color;
    }

    function setFontSize(el, size){
      return el.style.fontSize = size;
    }

    function cast(fn){
      return wrap(multicast(fn), (...args)=>{
          if(typeof args[0] === "string"){
              args[0] = Array.from(document.querySelectorAll(args[0]));
          }
          return args;
      });
    }

    [setColor, setFontSize] = multicast(cast)([setColor, setFontSize]);

    setColor("li:nth-child(2n+1)", "red");

    setFontSize("li:nth-child(2n+1)", "32px");

演示例子

接下来，我们继续对上面的代码进行优化，我们可以构造一个高阶函数 zip，它结合面向对象和过程抽像：

function zip(props){
      function Class(...args){
        this.__args = args;
      }
      let keys = Object.keys(props);
      keys.forEach((key) => {
        Class.prototype[key] = function(...args){
          return props[key].apply(this, [...this.__args, ...args]);
        };
      });
      return (...args)=>new Class(...args);
    }

    function add(x, y){
      return x + y;
    }

    function sub(x, y){
      return x - y;
    }

    let N = zip({add, sub});

    console.log(N(9).add(8)); //17

    console.log(N(3).sub(5)); //-2

有了 zip，我们就可以实现链式调用：

function zip(props){
      function Class(...args){
        this.__args = args;
      }
      let keys = Object.keys(props);
      keys.forEach((key) => {
        Class.prototype[key] = function(...args){
          return props[key].apply(this, [...this.__args, ...args]);
        };
      });
      return (...args)=>new Class(...args);
    }

    function multicast(fn){
      return function(list, ...args){
        if(Array.isArray(list)){
          return list.map((item)=>fn.apply(this, [item,...args]));
        }else{
          return fn.apply(this, [list,...args]);
        }
      }
    }

    function wrap(fn, before, after){
      return function(...args){
        if(before){
        args = before.apply(this, args);
        }
        let ret = fn.apply(this, args);
        if(after){
            ret = after.apply(this, [ret, ...args]);
        }
        return ret;
      }
    }

    function setColor(el, color){
      return el.style.color = color;
    }

    function setFontSize(el, size){
      return el.style.fontSize = size;
    }

    function cast(fn){
      return wrap(multicast(fn), (...args)=>{
          if(typeof args[0] === "string"){
              args[0] = Array.from(document.querySelectorAll(args[0]));
          }
          return args;
      }, (ret,...args)=>$(args[0]));
    }

    [setColor, setFontSize] = multicast(cast)([setColor, setFontSize]);

    let $ = zip({setColor, setFontSize});

    $("li:nth-child(2n+1)").setColor("red").setFontSize("32px");

演示例子

通过上面的例子，我们体会一下函数式编程的基本思想：

设计高阶函数：操作函数的函数，例如例子中的 multicast、wrap、cast、zip
高阶函数之间可以组合调用，例如 cast 调用 wrap， wrap 调用 multicast，cast 后的函数再被 zip 调用。组合调用可以给函数扩展出复杂的功能。

防御性编程

我们还可以使用上面的 wrap 高阶函数进行防御性编程：

function wrap(fn, before, after){
      return function(...args){
        if(before){
        args = before.apply(this, args);
        }
        let ret = fn.apply(this, args);
        if(after){
            ret = after.call(this, [ret, ...args]);
        }
        return ret;
      }
    }

    Object.defineProperty(window, "ERROR_IF_MISSING", {
      get: function(){
        throw new TypeError("missing parameter")
      },
      writeable: false
    });


    function add(x, y){
        return x + y;
    }

    var add = wrap(add, 
              (x = ERROR_IF_MISSING, y = ERROR_IF_MISSING)=>[x, y]);

    //Uncaught TypeError: missing parameter
    console.log(add());

演示例子

上面的代码如果不给 x 或 y 赋值，就会强制抛出一个 TypeError。

总结

我们说函数式编程是一种编程思想或者编程范式，上面的例子演示了函数式编程思想本身的基本应用场景。其实不管是号称支持函数式编程的 lodash、underscore 或者更强大一些的 ramdajs 库，它们的基本原理和使用场景也都包括上面的这些点。

通过上面的讨论我们还可以得出结论，函数式编程拥有强大的抽象能力，也正是因为抽象能力强，函数式编程的模型才拥有巨大的潜力。

函数式编程是程序设计范式的一种，就像面向对象编程一样，它是我们解决问题可以选择的模式和思路，它和命令式编程（面向过程、面向对象）之间并不意味着非此即彼的选择，而是可以并存。所以，关键问题不在于函数式编程实不实用，而在于学习一种新的思考模式，这种思考模式能够帮助我们更深入理解程序设计原理和本质，深入了解函数式编程的优点和缺点，从而写出更通用抽象能力更强质量更好的代码。

这不会是月影的最后一篇关于函数式编程的讨论，而仅仅是一个开始，因为函数式编程领域很大，这是一个很深的话题，让我们一起继续探索吧。