月影谈：高阶函数对系统的“提纯”

<转载自>月影 奇舞周刊微信公众号文章

这是月影谈函数式编程系列的第2篇文章，上一篇文章讲的是：函数式编程离我们有多远？
纯函数指的是函数的输出完全由输入所决定，运行过程不依赖于系统的状态和上下文环境，运行过程不改变它作用域之外的环境状态。
纯函数对设计可靠、稳定、易于调试和易于测试的系统有着非常重要的作用。在JavaScript程序设计中有一个基本的原则就是尽可能限制副作用（side effect），执行过程尽量不要依赖于环境。这是非常好的原则，纯函数的好处是非常明显的。

不过，我们有时候也还是要用到非纯函数的，显而易见的例子就是，JavaScript总是在特定环境中运行的，浏览器中的JavaScript不可能不操作DOM，Node.js也不可能永远不操作文件或者数据库，这些都会改变“环境状态”，还有诸如Array.sort、Math.random、setTimeout、setInterval这些内置的函数也都是非纯的函数。
纯函数和非纯函数的几个例子：

//纯函数
function add(x, y){    
  return x + y;
}

//纯函数
function sub(x, y){    
  return x - y;
}

//非纯函数，依赖于系统时间
function now(){    
  return data.now();
}

//非纯函数，依赖于作用域外的变量
var idx = 0;
function inc(){    
  return ++idx;
}

//非纯函数，依赖于随机数生成
function random(){    
  return Math.random();
}

//非纯函数，操作改变 DOM
function addItem(){    
  var li = document.createElement("li");    //...
  document.body.appendChild(li);
}

有一种观点认为，纯函数是函数式编程的一个支柱。由于函数式编程将函数本身也作为数据来对待，纯函数的返回值只依赖于参数，这看起来对将函数作为数据的“运算”的函数式编程思想是十分重要的。除了以上直接的原因之外，函数式编程思想与纯函数之间究竟还有什么关联？针对纯函数，我们还能应用函数式编程做些什么？ 这个话题值得深入探讨。

“不纯度”污染

纯函数的组合依然是纯函数，然而只要有一个函数不纯，那么调用了它的其他函数也是“不纯的”。

//setColor 不是纯函数，它改变外部环境（DOM）
function setColor(el, color){
  el.style.color = color;    
  return el;
}
//setColorEls 显然也不纯，因为它依赖于 setColor
function setColorEls(els, color){    
  return els.map((el)=>setColor(el, color));
}

上面的例子里，我们定义了两个函数，setColor 和 setColorEls 它们都不是纯函数，因为 setColorEls 依赖了 setColor。

设想一下，如果调试时发现 setColorEls 出错了，我们就要检查 setColorEls 和 setColor 两个函数来确定问题所在。

上面只是一个简单的例子，如果更加复杂的情况，那么可能一个出错点就需要牵扯出一系列函数，在一大坨代码中寻找问题了 —— 相信很多程序员都遇到过，那绝不是一种愉快的经历。

有没有办法让 setColorEls 依赖于 setColor， 但同时又能限制造成的纯度污染呢？答案是有的，需要继续往下讨论。

高阶函数的纯度
函数可替代性与等价关系
对于数值来说，我们很容易定义出两个数的等价关系。那么对于两个函数来说，我们如何定义它们的等价关系呢？
对于“纯函数”来说，判断两个函数等价，只要保证对于任意相同输入，两个函数返回的输出都相同，那么两个函数等价。

//两个纯函数 foo 和 bar 等价
function foo(arr, obj){    
  var ret = arr.slice(0);
  ret.push(obj);    
  return ret;
}

function bar(arr, obj){    
  return arr.concat([obj]);
}

函数等价意味着可替换，也就是说，我们可以将系统里所有使用到 foo 的地方都用 bar 替换，系统的运行结果不会有任何问题。换句话说，如果确保 foo 没问题，那么将来系统出了问题，也可以直接排除是 bar 引起的问题。

注意 JavaScript 函数纯度要考虑 this 上下文：

var point = {x:1, y:2};
//这个函数其实是不纯的，因为它依赖了 this 上下文
function pointAdd(x, y){    
  return this.x + this.y;
}

point.add = pointAdd;
point.add2 = pointAdd.bind(point);

上面的代码，point.add 和 point.add2 不等价，通常情况下的替换不会有问题，但是我们难以保证系统里面没有point.add.call、point.add.apply或者 point2 = point.add 之类的代码存在，如果有那些代码存在，用 point.add2 代替point.add 就会出大问题了。

那么上面的例子是否说明只有纯函数才可以判定等价和可替换呢？

答案显然不是：

//不论 foo 是任何函数，不论 foo 的纯度如何， bar 始终和 foo 可替换
function foo(){    
  //blablabla....
}

function bar(...args){    
  return foo.apply(this, args);
}

考虑上面的代码，毫无疑问地，不管 foo 内部是个什么鬼，不管它有没有副作用，有不管它没有 bind this，不管它在调用时的 this 是什么，我们都可以无比肯定，十分确定地下结论：bar和foo完全可以相互替换，任意替换 foo 为 bar 或者替换 bar为 foo，系统不会有任何问题（除开一些小小的性能开销，因为bar多了一层调用）。

到这一步，我们可以给出一个定义：

定义：JavaScript 函数 f 与 g 相等的充分必要条件是 f 与 g 是可替换的。

好了，我们在上面给出了判定两个函数相等的一般性定义，而这个定义和函数本身的纯度无关。
这个定义有什么意义呢？这个定义的意义就是，既然我们有了判定函数相等的一般性法则，我们就可以唯一确定一个函数了，就像确定数据一样，1是1，2-1，-1+2，0.5*2也都是1，1是唯一的。

既然我们可以唯一确定一个函数，那么我们就能说如果一个高阶函数的参数确定，返回一组确定的函数，那么这个高阶函数是纯函数。

使用高阶纯函数
现在我们该回到前面 setColor 的例子了：

//高阶函数 multicast 是纯函数，它的只依赖于不同的参数，返回确定的结果
function multicast(fn){  
  return function(list, ...rest){    
    if(Array.isArray(list)){        
      return list.map((o)=>fn.apply(this, [o, ...rest]));
    }else{        
      return fn.apply(this, arguments);
    }
  }
}

//setColor 不是纯函数，它改变外部环境（DOM）
function setColor(el, color){
  el.style.color = color;    
  return el;
}

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

上面的代码有几个好处：

• multicast 是纯函数，它简单灵活，对系统的影响很小。
• multicast 对任意函数返回确定的函数，不影响外部环境和状态。
• setColorEls 在 multicast 保证可靠的情况下，完全依赖于 setColor，如果它出错，只需要检查 setColor的实现，使得调试变得简单了。
• multicast是通用的，不管是setColor、setBGColor、setFont还是什么其他的API，都可以用它来统一处理，获得同样的好处。

总结：
使用函数式编程思想中的高阶函数能够设计出简单可靠的API，这些高阶的API根据确定参数返回确定的函数，它们依然是纯函数，它们拥有纯函数的优点。使用它们对简化系统，提升可扩展性和可维护性都有着非常大的帮助。

文章里面的例子只是非常简单的小案例，而实际项目中使用高阶函数设计系统能够取得更加不可思议的效果和美妙的开发体验。如果你善于使用这样的技巧，构建小而美却功能强大易于扩展的系统，就不是一件多么难的事情了。