纯函数
若一个函数对相同的输入,永远会得到相同的输出,并且不会影响该函数作用域以外的环境变量,则此函数称为纯函数。
纯函数和非纯函数:
// 纯函数
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);
}