函数式编程

编程规范

面向过程编程：先做这个，再做那个，然后……；
面向对象编程：把功能封装为对象，相关操作作为对象方法；
函数式编程：把复杂功能拆分为一系列独立函数，通过函数之间相互调用完成功能；

函数式编程

特点

纯函数：相同输入得到相同输入，返回结果只依赖参数；
减少函数副作用：改变了外部数据，如全局变量与引用类型参数；

// 纯函数
function add(num) {
  return num + 1;
}

// 非纯函数
let a = 1;
function add(num) {
  return num + a;
}

// 副作用：改变了外部数据
let a = 1;
function add() {
 a +=1;
}

// 副作用：改变了引用类型里的值
let a = { name: '张三', age: 18 };
function addAge(a) {
  a.age = 19;
  return a;
}

与面向对象比较

假设有一个减法计算器

场景一：在原有基础上新增加法；
场景二：在原有基础上新增乘法；
场景三：在只要加法和乘法；

先看看面向对象写法

// 减法计算器
class Calc {
  constructor(num = 0) {
    this.num = num;
  }

  sub(num) {
    this.num = this.num - num;
  }
}

// 场景一
class first extends Calc {
  constructor(num = 0) {
    super(num);
  }

  add(num) {
    this.num = this.num + num;
  }
}

// 场景二
class second extends Calc {
  constructor(num = 0) {
    super(num);
  }

  mult(num) {
    this.num = this.num * num;
  }
}

// 场景三
class third {
  constructor(num = 0) {
    this.num = num;
  }

  add(num) {
    this.num = this.num + num;
  }

  mult(num) {
    this.num = this.num * num;
  }
}

面向对象编程的场景三完全不能复用场景一和场景二的代码，再看看函数式编程，拆分为单个函数维护，任意场景组合使用。

// 减法
function sub(num1, num2) {
  return num1 - num2;
}

// 加法
function add(num1, num2) {
  return num1 + num2;
}

// 乘法
function mult(num1, num2) {
  return num1 * num2;
}

// 原场景
sub();

// 场景一
sub();
add();

// 场景二
sub();
mult();

// 场景三
add();
mult();

模块化导入导出

在场景三中，如果我们只是用 add 方法，在前端工程化打包过程中，面向对象编程是无法去掉未使用的方法（ mutl 方法）；而函数式编程是可以被tree-shaking优化的。

/* calc.js */
// 加法
export function add(num1, num2) {
  return num1 + num2;
}

// 乘法
export function mult(num1, num2) {
  return num1 * num2;
}

/* index.js */
import { add } from './calc.js';