JS 当中的函数柯里化和高阶函数

一、函数柯里化

在使用 React 的时候，有受控组件和非受控组件，在受控组件当中，通过 onChange 的事件来修改组件的状态，一般数量少表单控件可以采用一个控件一个监听函数的方式来编写，但是这种写法会让我们写大量的重复代码，所以我们应该采用函数柯里化的方式来编写

柯里化: 在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术

如下一个最简单的实例，求和:

function sum(a, b, c) {
  return a + b + c;
}
sum(1, 2, 3); // 6

采用函数柯里化的方式来写的话就如下:

function sum(a) {
  return (b) => {
    return (c) => {
      return a + b + c;
    };
  };
}

sum(1)(2)(3); // 6

二、受控组件当中使用函数柯里化

使用方法如下面代码所示：

class Login extends React.Component {
  //初始化状态
  state = {
    username: "", //用户名
    password: "", //密码
  };

  //保存表单数据到状态中
  saveFormData = (dataType) => {
    return (event) => {
      this.setState({ [dataType]: event.target.value });
    };
  };

  //表单提交的回调
  handleSubmit = (event) => {
    event.preventDefault(); //阻止表单提交
    const { username, password } = this.state;
    alert(`你输入的用户名是：${username},你输入的密码是：${password}`);
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        用户名：
        <input
          onChange={this.saveFormData("username")}
          type="text"
          name="username"
        />
        密码：
        <input
          onChange={this.saveFormData("password")}
          type="password"
          name="password"
        />
        <button>登录</button>
      </form>
    );
  }
}

三、高阶函数

如果一个函数符合下面 2 个规范中的任何一个，那该函数就是高阶函数。

​ 1、若 A 函数，接收的参数是一个函数，那么 A 就可以称之为高阶函数。

​ 2、若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称之为高阶函数。

​ 常见的高阶函数有：Promise、setTimeout、arr.map()等等

JavaScript 当中的高阶函数使用指南: 高阶函数 (opens new window)