本文主要参考

• 作者：胡子大哈
• 原文链接： http://huziketang.com/books/react/lesson32
• 转载请注明出处，保留原文链接和作者信息。

纯函数的好处

纯函数非常“靠谱”，执行一个纯函数你不用担心它会干什么坏事，它不会产生不可预料的行为，也不会对外部产生影响。
不管何时何地，你给它什么它就会乖乖地吐出什么。如果你的应用程序大多数函数都是由纯函数组成，那么你的程序测试、调试起来会非常方便。

纯函数（Pure Function）

纯函数 (Pure Function) 是 函数式编程 里面非常重要的概念 。

如果一个函数是 纯函数 (Pure Function) ，它必须符合两个条件：

• 返回结果只依赖于它的参数。
• 并且在执行过程里面没有副作用。

1. 函数的返回结果只依赖于它的参数

例1.1

const a = 1
const foo = (b) => a + b
foo(2) // => 3

虽然这里的 a 是常量，但函数 foo 不属于纯函数，因为它的返回结果并不只是依赖它的参数 b ，还依赖了a 。也许在这里 a 是常量，但谁也不能保证在别的地方调用 foo 函数时，a 仍是常量，值仍为2，所以返回结果是不可控的。

例1.2

const a = 1
const foo = (x, y) => x + y
foo(a, 2)

函数 foo 仅依赖它的参数 x 和 y ，返回结果也只由这两个参数决定，是可控的。

2. 函数执行过程没有副作用

一个函数执行过程对产生了外部可观察的变化那么就说这个函数是有副作用的。

例2.1

const counter = { x: 1 }
const foo = (obj, b) => {
  obj.x = 2
  return obj.x + b
}

foo(counter, 2) // => 4
counter.x // => 2

执行 foo 函数时，有将作为参数传进来的外部变量 counter.x 的值修改为 2。无论函数在哪里执行，都会修改函数外部变量的值，所以它产生了 副作用，不是 纯函数 。

例2.2

const counter = { x: 1 }
const foo = (obj, b) => {
  return obj.x + b
}

foo(counter, 2) // => 3
counter.x // => 1

可以看得出来，以 counter 和 2 为参数执行了 foo 函数后， counter.x 的值并没有发生什么变化。所以 foo 函数执行过程中没有修改函数外部的值，没有产生 副作用 。

例2.3

const foo = (b) => {
  const obj = { x: 1 }
  obj.x = 2
  return obj.x + b
}

执行函数时，虽然 obj.x 的值有变化，但 obj 是在函数内部声明的，不属于函数外部的值，外部程序根本观察不到，所以没有产生 副作用。

除了修改外部的变量，一个函数在执行过程中还有很多方式产生外部可观察的变化，比如说调用 DOM API 修改页面，或者你发送了 Ajax 请求，还有调用 window.reload 刷新浏览器，甚至是 console.log 往控制台打印数据也是 副作用 。