高阶函数_函数柯里化

高阶函数(定义)

如果一个函数符合下面两个规范,就是高阶函数:

  • 如果A函数,接收的参数是一个函数,那么A就是一个高阶函数(比如数组方法arr.map()接收的就是一个处理item的函数了)

  • 如果A函数,调用的返回值依然是一个函数,那么A也称为是高阶函数(常见的高阶函数:Promise、setTimeout、arr.map()等等数组内置的方法)

函数柯里化(定义)

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

(有点像回调地狱的感觉,就是一直then)

一个柯里化的例子:

class Login extends React.Component {
state = {
username: '',
password: ''
}

saveFormData = (dataType) => {
console.log(dataType);
return event => {
this.setState({[dataType] : event.target.value})
}
}
render() {
return (
<form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveFormData('username')} type="text" name="username"/>
密码:<input onChange={this.saveFormData('password')} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
例子疑问一:

为什么通过 this.saveFormData('username') 这样不是会把返回值给onChange函数吗?

回答:如果saveFormData()函数返回的是一个函数的话就可以

解释:

  • 因为this.saveFormData('username'),把‘username’传递作为saveFormData的形参dataType

  • 返回给onChange的函数相当于

onChange={ event => { this.setState({[username] : event.target.value}) } } 

所以这个event其实就是这个input的元素对象了

例子疑问二:

为什么用{[dataType] : event.target.value}

解释:

  • 假如我们写的是dataType : event.target.value,其实就相当于是给this.state.dataType赋值了,但是dataType它要表示的是username或者是password,而不是dataType这个变量

比如说 obj = { a: 2} ,可以通过obj.a获取,也可以通过obj[a]获取

而下面其实省略了一点东西,完整的是 this[dataType],因为我们把dataType通过参数传递进来了

它是this的一个属性了,我们访问dataType的时候,其实默认的是通过this.dataType也就是通过

this当前作用域来找到对应的变量的

因为dataType是我们传递过来的形式参数,所以通过this.dataType可以获取到我们的形式参数了

没有柯里化的例子

class Login extends React.Component {
state = {
username: '',
password: ''
}

saveFormData = (dataType, event) => {
this.setState({[dataType] : event.target.value})
}
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交默认事件
const {username, password} = this.state
alert(`你输入的用户名是:${username}, 你输入的密码是:${password}`)
}
render() {
return (
<form action="http://www.atguigu.com" 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>
)
}
}

React-高阶函数_函数柯里化的更多相关文章

  1. Java函数式编程:二、高阶函数,闭包,函数组合以及柯里化

    承接上文:Java函数式编程:一.函数式接口,lambda表达式和方法引用 这次来聊聊函数式编程中其他的几个比较重要的概念和技术,从而使得我们能更深刻的掌握Java中的函数式编程. 本篇博客主要聊聊以 ...

  2. 浅析 JavaScript 中的 函数 uncurrying 反柯里化

    柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...

  3. 从 ES6 高阶箭头函数理解函数柯里化

    前言:第一次看到多个连续箭头函数是在一个 react 项目中,然鹅确认了下眼神,并不是对的人,因为看得一脸懵逼.em......于是开始各种搜索,先是知道了多个连续箭头函数就是 es6 的多次柯里化的 ...

  4. JS的闭包、高阶函数、柯里化

    本文原链接:https://cloud.tencent.com/developer/article/1326958 https://cloud.tencent.com/developer/articl ...

  5. Python高阶函数及函数柯里化

    1 Python高阶函数 接收函数为参数,或者把函数作为结果返回的函数为高阶函数. 1.1 自定义sort函数 要求:仿照内建函数sorted,自行实现一个sort函数.内建函数sorted函数是返回 ...

  6. js高阶函数应用—函数柯里化和反柯里化(二)

    第上一篇文章中我们介绍了函数柯里化,顺带提到了偏函数,接下来我们继续话题,进入今天的主题-函数的反柯里化. 在上一篇文章中柯里化函数你可能需要去敲许多代码,理解很多代码逻辑,不过这一节我们讨论的反科里 ...

  7. JavaScript函数柯里化

    函数式 JavaScript是以函数为一等公民的函数式语言.函数在JavaScript中也是一个对象(继承制Function),函数也可以作为参数传递成函数变量.最近几年函数式也因为其无副作用的特性. ...

  8. swift 学习(二)基础知识 (函数,闭包,ARC,柯里化,反射)

    函数 func x(a:Int, b:Int)  {}   func x(a:Int, b:Int) -> Void {}  func x(a:Int, b:Int) ->(Int,Int ...

  9. 浅析 JavaScript 中的 函数 currying 柯里化

    原文:浅析 JavaScript 中的 函数 currying 柯里化 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字 ...

  10. 前端进击的巨人(五):学会函数柯里化(curry)

    柯里化(Curring, 以逻辑学家Haskell Curry命名) 写在开头 柯里化理解的基础来源于我们前几篇文章构建的知识,如果还未能掌握闭包,建议回阅前文. 代码例子会用到 apply/call ...

随机推荐

  1. sql 中的with 语句使用

    一直以来都很少使用sql中的with语句,但是看到了一篇文章中关于with的使用,它的确蛮好用,希望以后记得使用这个语句.一.with 的用法With alias_name as (select1)[ ...

  2. java 搞笑注释

    // _ooOoo_ // o8888888o // 88" . "88 // (| -_- |) // O\ = /O // ____/`---'\____ // . ' \\| ...

  3. Javascript - Vue - webpack中的组件、路由和动画

    引入vue.js 1.cnpm i vue -S 2.在mian.js中引入vue文件 import Vue from "vue"//在main.js中使用这种方式引用vue文件时 ...

  4. myScript调研,电子手写板使用,纯干货

    第二天进公司,就叫我调研myScript作为手写板的可行性,又不能不做,哎~ myScript效果十分的奈斯,前端用canvas手写的文字.数学字符,都可以识别然后转换,不知道myScript是不是你 ...

  5. MySQL-SQL基础-查询1

    #子查询-某些情况下,当进行查询的时候,需要的条件是另外一个select语句的结果,这个时候就要用到子查询.用于子查询的关键字主要包括: in.not in.=.!=.exists.not exist ...

  6. HCNP Routing&Switching之OSPF LSA类型(二)

    前文我们了解了OSPF的一类.二类.三类LSA,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15209829.html:今天我们来聊一聊OSPF的四类和五类L ...

  7. 剑指 Offer 36. 二叉搜索树与双向链表

    剑指 Offer 36. 二叉搜索树与双向链表 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的循环双向链表.要求不能创建任何新的节点,只能调整树中节点指针的指向. 为了让您更好地理解问题,以下面的 ...

  8. MyBatis学习总结(三)——MyBatis配置文件配置的优化

    一.连接数据库的配置单独放在一个properties文件中 上文 连接数据库的配置写在 mybatisConf.xml中,本文直接放在 db.properties 中, 在mybatisConf.xm ...

  9. AFL++ Fuzz一个libexif例子

    CVE-2009-3895 首先在NVD找到漏洞描述如下: 大致意思是说:libexif 0.6.18 中的 libexif/exif-entry.c 中的 exif_entry_fix 函数中基于堆 ...

  10. C# ASP.NET RAZOR 链接SQLSERVER

    @using System.Data.SqlClient; @using System.Data;//必须引用 <html> <body> <h1>Learn Sq ...