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);
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,826评论 25 709
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,882评论 1 18
  • 里仁为美,择不处仁,焉得知? 《论语》 句意:能够达到仁的境界为最好,如果在各方面达不到仁的境界,怎么能算得上是有...
    xcy无名阅读 889评论 0 0
  • (最爱芋头必点、萝卜葱花摊蛋、鸭胗带、送的一块鸭肉 11RMB) 最接近家乡味道的沙茶面 哈哈还比家里有些店里的好...
    八戒阿八戒阅读 238评论 6 0
  • 初见你时,我不得不承认,你的身形、眉眼、音色都是那么的符合我心目中一个男神的形象,只一眼,就令人“着迷”,我想这对...
    我是我自己的骄傲阅读 490评论 2 4