高阶函数_函数柯里化
高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。
- 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。
- 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。
函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。
常见的高阶函数:
- Promise()
- setTimeout()
- arr.map()
- 等等
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高阶函数_函数柯里化</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> //<!--此处一定要写babel-->
//创建组件
class Login extends React.Component{
//初始化状态
state = {
username:'',
password:''
}
//表单提交的
handleSubmit=(event)=>{
event.preventDefault() //阻止表单提交跳转(阻止默认事件)
const {username,password} = this.state
alert('你输入的用户名是:${username},密码是:${password}')
}
//保存表单数据到状态中
saveFormData = (dataType) =>{
return (event) =>{
this.setState({[dataType] : event.target.vaule})
}
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveFormData('username')} type="text"/>
密码:<input onChange={this.saveFormData('password')} type="password"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
其中saveFormData()就是高阶函数,它满足高阶函数的第二条要求,即调用的返回值依然是一个函数。
展示函数柯里化的简单例子:
function sum(a){
return(b)=>{
return(c)=>{
return a+b+c;
}
}
}
const result = sum(1)(2)(3) //6
不用函数柯里化的实现
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>2_不用函数柯里化的实现</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> //<!--此处一定要写babel-->
//创建组件
class Login extends React.Component{
//初始化状态
state = {
username:'',
password:''
}
//表单提交的
handleSubmit=(event)=>{
event.preventDefault() //阻止表单提交跳转(阻止默认事件)
const {username,password} = this.state
alert('你输入的用户名是:${username},密码是:${password}')
}
//保存表单数据到状态中
saveFormData = (dataType,event) =>{
this.setState({[dataType] : event.target.vaule})
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名:<input onChange={(event)=>{this.saveFormData('username',event)}} type="text"/>
密码:<input onChange={(event)=>{this.saveFormData('password',event)}} type="password"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>