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 很难能全部做到纯函数,因为它存在变量,你不可能在函数之间传递着变量,还能做到纯函数。更好的做法是将纯函数操作抽象出来,然后提供统一的非纯操作入口。

比如 reactVirtual 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);
}
    原文作者:PorcoPP
    原文地址: https://www.jianshu.com/p/a9daa1464f9d
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞