高阶函数与函数柯里化(学习笔记)

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

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

例子:

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

函数柯里化可用于比如第三方库封装的方法,默认会返回一个event参数,但是我们有时想传入第二个自定义参数,这时直接传的话是无效的。我们可以通过函数柯里化的方式,函数返回另一个函数,这时我们可以给自定义的函数传一个自定义参数,return的函数此时接收的就是第三方库默认返回的event参数,接收到两个参数后统一处理。

<script type="text/babel">
      //创建组件
      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>
            )
         }
      }
      //渲染组件
      ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

不用柯里化写法实现接收两个参数——箭头函数形式:

<form onSubmit={this.handleSubmit}>
用户名:<input onChange={event => this.saveFormData('username', event)} type="text" name="username"/>
密码:<input onChange={event => this.saveFormData('password', event)} type="password" name="password"/>
<button>登录</button>
</form>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容