【JavaScript】纯函数理解

纯函数

理解JavaScript纯函数

• ◼ 函数式编程中有一个非常重要的概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念;

  •  在react开发中纯函数是被多次提及的;
  •  比如react中组件就被要求像是一个纯函数(为什么是像，因为还有class组件)，redux中有一个reducer的概念，也是要求必须是一个纯函数;
  •  所以掌握纯函数对于理解很多框架的设计是非常有帮助的;

• ◼ 纯函数的维基百科定义:

  •  在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数:
    •  此函数在相同的输入值时，需产生相同的输出。
    •  函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。
    •  该函数不能有语义上可观察的函数副作用，诸如 “触发事件”，使输出设备输出，或更改输出值以外物件的内容等。

• 💡 举例1:

function sum (num1,num2) {
    return num1 + num2
}
sum(10,20)  //30
sum(10,20)  //30
sum(10,20)  //30
sum(10,20)  //30
sum(10,20)  //30
sum(10,20)  //30

在任何情况下 sum(10,20) 的结果都必须是 30，不能是其他结果，如果是其他结果就不是纯函数了。

• 💡 举例2:

var num = 100
function sum (num1,num2) {
    return num1 + num2 + num
}
sum(10,20)  // 130
sum(10,20)  // 130

num = 200 

sum(10,20)  // 230 此时，相同的输入，但输出结果不相同

这个时候，函数sum就不是纯函数；
所以，纯函数不能使用闭包。不能使用外层作用域的变量，一旦使用外层作用域的变量，一旦变量发生变化，函数的输出就发生变化。

• ✅ 当然上面的定义会过于的晦涩，所以我简单总结一下:
  • ✅ 确定的输入，一定会产生确定的输出;
  • ✅ 函数在执行过程中，不能产生副作用;

副作用概念的理解

• ◼ 那么这里又有一个概念，叫做副作用，什么又是副作用呢?
  •  副作用(side effect)其实本身是医学的一个概念，比如我们经常说吃什么药本来是为了治病，可能会产生一些其他的副作用;
  •  在计算机科学中，也引用了副作用的概念，表示在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响， 比如修改了全局变量，修改参数或者改变外部的存储;
• ◼ 纯函数在执行的过程中就是不能产生这样的副作用:
  •  副作用往往是产生bug的 “温床”。

var address = "火星"
function printInfo(info) {
    console.log(info.name, info.age, info.msg);
    info.flag = "🖨️"
    address = "🌍"
    
}

var obj = {
    name: "why",
            age: 18,
    msg: "副作用"
}
printInfo(obj)
console.log(obj);

纯函数的案例

• ◼ 我们来看一个对数组操作的两个函数:
  •  slice:slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组;
  •  splice:splice截取数组, 会返回一个新的数组, 也会对原数组进行修改;
• ◼ slice就是一个纯函数，不会修改数组本身，而splice函数不是一个纯函数;

纯函数的作用和优势

• ◼ 为什么纯函数在函数式编程中非常重要呢?
  •  因为你可以安心的编写和安心的使用;
  •  你在 写的时候 保证了函数的纯度，只是单纯实现自己的业务逻辑即可，不需要关心传入的内容是如何获得的或者依赖其他的 外部变量是否已经发生了修改;
  •  你在用的时候，你确定你的输入内容不会被任意篡改，并且自己确定的输入，一定会有确定的输出;
    ◼ React中就要求我们无论是函数还是class声明一个组件，这个组件都必须像纯函数一样，保护它们的props不被修改；