高阶函数和函数的柯里化

一、高阶函数

定义：

如果一个函数符合下面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)

三、综合案例

在这里插入图片描述

<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>