好好聊聊 - 纯函数

最新推荐文章于 2023-02-27 12:42:35 发布

zz_jesse

最新推荐文章于 2023-02-27 12:42:35 发布

阅读量116

点赞数

关注“重度前端”

助力前端深度学习

━━━━━

640?wx_fmt=png

前言

最近看了下有些框架的实现机制，发现大量使用了纯函数。所以今天就把纯函数的概念重新梳理一遍。

1.什么是纯函数？

一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。

用人类的话讲，纯函数的特性： 1.调用这个函数，只要我参数不变，这个函数的值始终不改变。 2.数值，对象使用这个函数，使用前后，自身的值不会发生变化，这就是指的副作用。也有人说是同输入同输出，我传入什么，掉用完，传出的就是什么。

640?wx_fmt=png

 let a = 0;
 const fun = (val)=>{
       return val + a;
 }
 let b = 1;
 console.log(fun(b))  // 1
 a=1
 console.log(fun(b))  // 2

这个例子就不是一个纯函数，因为当a的值发生改变，函数输出的结果改变了，它不符合纯函数的第一条特性。

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

同样的道理这个例子虽然没有其它变量干扰函数的返回值，但是counter.x的值在调用函数之后发生了变化。

再

640?wx_fmt=png

再举个正确的例子吧，下面函数便是一个纯函数！

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

虽然 foo 函数内部修改了 obj，但是 obj 是内部变量，外部程序根本观察不到，修改 obj 并不会产生外部可观察的变化，这个函数是没有副作用的，因此它是一个纯函数。

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

纯函数很严格，也就是说你几乎除了计算数据以外什么都不能干，计算的时候还不能依赖除了函数参数以外的数据。

为什么说纯函数在 JavaScript 很重要？

纯函数在函数式编程中被大量使用。而且诸如 ReactJS 和 Redux 等优质的库都需要使用纯函数。

不过，纯函数也可以用在平常的 JavaScript 开发中使用，不一定要限死在某个编程范例中。你可以混合纯的和不纯的函数，这完全没问题。

并非所有函数都需要是纯的。例如，操作 DOM 的按钮按下的事件处理程序就不适合纯函数。不过，这种事件处理函数可以调用其他纯函数来处理，以此减少项目中不纯函数的数量。

可测试性和重构

另一个使用纯函数的原因是测试以及重构。

使用纯函数的一个主要好处是它们可以直接测。如果传入相同的参数，它们将始终产生相同的结果。

同时纯函数还使得维护和重构代码变得更加容易。你可以放心地重构一个纯函数，不必操心没注意到的副作用搞乱了整个应用而导致终调试地狱。（译注：如果项目中充斥着副作用，那么函数/模块之间的逻辑可能互相交织耦合，在后期新增逻辑时可能由于依赖复杂而难以重构，更常见的是开发为了应付需求而不断的引入新的副作用到原本的逻辑上从而导致代码变得越来越糟糕。）

正确地使用纯函数可以产生更加高质量的代码。并且也是一种更加干净的编码方式。