js 纯函数思想

纯函数

若一个函数对相同的输入，永远会得到相同的输出，并且不会影响该函数作用域以外的环境变量，则此函数称为纯函数。

纯函数和非纯函数：

// 纯函数
function add(a) {
  var b = 0;
  return a + b;
}

// 非纯函数，依赖外部变量
var b = 0;
function add(a) {
  return a + b;
}

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

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

//非纯函数，设置外部 cookie
function setCookie(){
  document.cookie = "name=Porco";
}

纯函数可以做到自给自足，对测试友好、没有外部依赖，既不受外部环境影响，也不会影响外部环境。

纯函数的好处显而易见，但是 js 很难能全部做到纯函数，因为它存在变量，你不可能在函数之间传递着变量，还能做到纯函数。更好的做法是将纯函数操作抽象出来，然后提供统一的非纯操作入口。

比如 react 的 Virtual DOM 就是这样的思想，举例来说，原先我们的每次人为操作都会触发绑定事件或者监听，然后直接操作 dom 元素。对于冒泡事件来说，一次操作会触发多次 dom 渲染。react 将节点跟操作都抽象了出去，我们的操作首先修改内存中的虚拟dom，其他操作会继续操作这个dom，而当我们对dom的操作全部完成之后，一次将全部变更的 dom 节点重新渲染。

我们可以通过将函数一层层提纯，提高代码复用率、降低测试难度

// 原函数
function double(a, b) {
  var sum = a + b;
  var doubleSum = sum * 2;
}

// 提取出两个纯函数 add、multiplicative，可以通过对单个函数的测试通过，确保 double 的正确性
// 事实上，只要 add、multiplicative 这两个纯函数通过测试，double 甚至可以不用测
// 因为 纯函数 和 纯函数的组合，得到的依旧是一个纯函数
function add(a, b) {
  return a + b;
}
function multiplicative(a, b) {
  return a * b;
}
function double(a, b) {
  return multiplicative(add(a, b),  2);
}