高阶函数和函数的柯里化

一、高阶函数

定义:

  • 如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数:
    • 1、若 A 函数,接受的参数是一个函数,那么 A 就可以称为高阶函数。
    • 2、若 A 函数,调用的返回值依然是一个函数,那么 A 就可以称为高阶函数。
  • 常见的高阶函数有:Promise、setTimeout、arr.map() 等。

二、函数的柯里化

通过函数调用继续返回函数的方式,实现多次接受参数最后统一处理的函数编码形式,叫做函数的柯里化。

function sum (a,b,c) {
  return a+b+c
}
let result = sum(1,2,3)
console.log("普通函数:",result)

// 函数柯里化
function sum2(a) {
  return (b) => {
    return (c) => {
      return a + b + c
    }
  }
}
let result2 = sum2(1)(2)(3)
console.log("函数柯里化:", result2)

三、综合案例

高阶函数和函数的柯里化_第1张图片

<body>
  <div id="test">div>
  
  <script src="../js/react.development.js">script>
  <script src="../js/react-dom.development.js">script>
  <script src="../js/babel.min.js">script>
  <script type="text/babel">
    class Login extends React.Component {
      state = {
        username: "",
        password: ""
      }
      // 符合高阶函数第2条的定义,所以 saveFormData 函数叫做高阶函数
      // 符合函数柯里化的定义,所以 saveFormData 函数也叫函数的柯里化
      saveFormData = (dateType) => {
        return (event) => {
          this.setState({ [dateType]: event.target.value })
        }
      }
      confitm = (event) => {
        event.preventDefault();
        const { username, password } = this.state;
        alert(`你输入的用户名是${username},密码是${password}`)
      }
      render() {
        return (
          <div>
            <form action="" onSubmit={this.confitm}>
              用户名:<input onChange={this.saveFormData("username")} type="text" name="user"/>
              密码:<input onChange={this.saveFormData("password")} type="password" name="password" />
              <button>登录</button>
            </form>
          </div>
        )
      }
    }
    ReactDOM.render(<Login/>, document.getElementById("test"))
  script>
body>

你可能感兴趣的:(javascript,前端,开发语言)