一 历史和现状

函数式编程的起源,是一门叫做范畴论(Category Theory)的数学分支。理解函数式编程的关键,就是理解范畴论。它是一门很复杂的数学,认为世界上所有的概念体系,都可以抽象成一个个的”范畴”(category)。什么是范畴呢?也就是说,彼此之间存在某种关系的概念、事物、对象等等,都构成”范畴”。随便什么东西,只要能找出它们之间的关系,就能定义一个”范畴”。本质上,函数式编程只是范畴论的运算方法,跟数理逻辑、微积分、行列式是同一类东西,都是数学方法,只是碰巧它能用来写程序。所以,为什么函数式编程要求函数必须是纯的,不能有副作用?因为它是一种数学运算,原始目的就是求值,不做其他事情,否则就无法满足函数运算法则了。(来源于阮一峰大佬的网络博客,地址如下:https://ruanyifeng.com/blog/2017/02/fp-tutorial.html
随着react越来越流行,关注度变高;vue3开始拥抱函数式编程;函数式编程可以抛弃this;打包过程中可以更好的tree shaking;方便测试,方便并行处理;有些库:lodash、underscore、ramda

二 定义

FP(Functional Programming),编程范式之一,其他范式如面向对象、面向过程;
面向对象: 现实的事物抽象成类和对象、通过封装、继承、多态来演示事物的复杂性;
函数式编程:对运算过程抽象,抽象事物和事物之间的联系;
程序的本质: 根据输入运算后得到输出,重点在于x->y的过程
注意: 函数在里面是数学中的函数映射关系,不是程序中的函数(方法);
相同的输入要得到相同的输出;(纯函数)
函数式编程用来描述数据(函数)之间的联系;
示例:

  1. // 非函数式编程
  2. let a = 1;
  3. let b = 2;
  4. let sum = a + b;
  5. // 函数式编程
  6. function add(a, b) {
  7. return a + b;
  8. }
  9. let sum = add(1, 2);

三 First-class Funciton 一等公民

js中函数是个对象所以,函数可以存储在变量中;函数可以作为参数;函数作为返回值;也可以在运行中通过new function(){}来构造一个新的函数;
函数存储变量示例

  1. let fn = function() {
  2. console.log('fn')
  3. }
  4. // 函数参数和返回值相同时,视为同一个函数
  5. // 示例
  6. // const handler = {
  7. // index (a) {
  8. // return View.index(a);
  9. // },
  10. // show (b) {
  11. // return View.show(b);
  12. // }
  13. // }
  14. // 优化
  15. const handler = {
  16. index: View.index,
  17. show: View.show
  18. }

函数作为参数或者返回值(高阶函数)示例

  1. // 函数作为参数
  2. function forEach(arr, fn) {
  3. for(let i=0;i++;i<arr.length) {
  4. fn(arr[i], i);
  5. }
  6. }
  7. function filter (arr, fn) {
  8. let result = [];
  9. for(let i=0;i<arr.length;i++){
  10. if(fn(arr[i])) {
  11. result.push(arr[i]);
  12. }
  13. }
  14. return result;
  15. }
  16. // 函数作为返回值
  17. function makeFn () {
  18. let msg = 'hello';
  19. return function () {
  20. console.log(msg);
  21. }
  22. }
  23. function once (fn) {
  24. let flag = true;
  25. return function() {
  26. if(flag == true) {
  27. fn.apply(this, arguments);
  28. flag = false;
  29. }
  30. }
  31. }
  32. // 复习下apply
  33. // let a = {
  34. // x: 1,
  35. // y: function() {
  36. // console.log(this.x);
  37. // }
  38. // }
  39. // let b = {
  40. // x: 2
  41. // }
  42. // a.y.apply(b);
  43. // 2

使用高阶函数的意义
抽象通用的问题,屏蔽细节,关注目标
常用的高阶函数 forEach、filter、some、every、map、find、findIndx等;模拟示例如下

  1. // some
  2. function some (arr, fn) {
  3. let flag = false;
  4. for(let i=0;i<arr.length;i++) {
  5. if(fn(arr[i])){
  6. flag = true;
  7. break;
  8. }
  9. }
  10. return flag;
  11. }
  12. // every
  13. function every (arr, fn) {
  14. let flag = true;
  15. for(let i=0;i<arr.length;i++) {
  16. if(fn(arr[i])) {
  17. flag = false;
  18. break;
  19. }
  20. }
  21. return flag;
  22. }
  23. // map
  24. function map (arr, fn) {
  25. let result = [];
  26. for(let i=0;i<arr.length;i++) {
  27. result.push(fn(arr[i]))
  28. }
  29. return result;
  30. }
  31. // find
  32. function find (arr, fn) {
  33. let item = false;
  34. for(let i=0;i<arr.length;i++) {
  35. if(fn(arr[i])) {
  36. item = arr[i];
  37. }
  38. break;
  39. }
  40. return item;
  41. }
  42. // findindx
  43. function findIndex (arr, fn) {
  44. let index;
  45. for(let i=0;i<arr.length;i++) {
  46. if(fn(arr[i])) {
  47. index = i;
  48. break;
  49. }
  50. }
  51. return index;
  52. }

四 闭包

函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包;可以在另一个作用域中调用一个函数的内部函数并且可以访问到该函数的作用域的成员;
闭包的本质:函数在执行的时候会放到一个执行栈上,当函数执行完毕后会从栈上移除;但是堆上的成员因为外部引用不能被释放,因此内部函数依然可以访问外部函数的成员;延长了外部函数内部的作用范围;
闭包案例

  1. let power = function(pow) {
  2. return function(num){
  3. return Math.pow(num, pow)
  4. }
  5. }
  6. let power2 = power(2);
  7. let power3 = power(3);