高阶函数与函数柯里化

panda没有黑眼圈*~*

已于 2022-03-06 13:35:17 修改

阅读量457

点赞数 1

文章标签：高阶函数函数柯里化 js JavaScript react

于 2021-03-14 19:45:26 首次发布

本文链接：https://blog.csdn.net/weixin_43677405/article/details/114799637

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

高阶函数：如果一个函数符合下面2个规范中的 任何一个 ，那该函数就是高阶函数。

A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。

常见的高阶函数有：

Promise： new Promise(()=>{ })
setTimeout:new setTimeout(()=>{ })
数组里一些常见的函数，如arr.map()等等

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

演示函数的柯里化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 普通函数
        // function sum(a,b,c) {
        //     return a+b+c
        // }

        // 函数的柯里化
        function sum(a) {
            return (b)=>{
                return (c)=>{
                    return a+b+c 
                }
            } 
        }
        let res=sum(1)(2)(3)
        console.log(res)
    </script>
</head>
<body></body>
</html>

高阶函数和函数的柯里化使用：

之前写内联函数一直写成{this.funcName},如果写成{funcName（）}，会发现在创建组件时就执行了funcName函数，但是我们是希望在触发事件后执行。用高阶函数和函数的柯里化可以解决该问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test1"></div> 
    <!-- 引入react核心库 -->
    <script src="../react_packet/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script src="../react_packet/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="../react_packet/babel.min.js"></script>

    <script type="text/babel">
        class Login extends React.Component{
            // 初始化state
            state={
                username:"",
                password:""
            }
            // 弹出姓名和密码
            handleSubmit=()=>{
                event.preventDefault()//阻止表单提交
                const {username,password}=this.state
                alert(`用户名:${username}, 密码:${password}`)
            }

            // 保存表单数据到状态中
            saveFormDate=(dataType)=>{
                return (event)=>{
                    this.setState({[dataType]:event.target.value})
                }
            }

            render(){
                return(
                    <form onSubmit={this.handleSubmit}>
                        {/*这样就可以在内联函数里传入参数了*/}
                        用户名:<input onChange={this.saveFormDate("username")} type="text" name="username"/>
                        密码:<input onChange={this.saveFormDate("password")} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.getElementById("test1"))
    </script>
</body>
</html>

当然我们也可以不用柯里化解决该问题，正常写待参数的函数，并且将该函数写在回调函数里，这样就不会立马执行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test1"></div> 
    <!-- 引入react核心库 -->
    <script src="../react_packet/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script src="../react_packet/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="../react_packet/babel.min.js"></script>

    <script type="text/babel">
        class Login extends React.Component{
            // 初始化state
            state={
                username:"",
                password:""
            }
            // 弹出姓名和密码
            handleSubmit=()=>{
                event.preventDefault()//阻止表单提交
                const {username,password}=this.state
                alert(`用户名:${username}, 密码:${password}`)
            }

            // 保存表单数据到状态中
            saveFormData=(dataType,event)=>{
                this.setState({[dataType]:event.target.value})
            }

            render(){
                return(
                    <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>
                )
            }
        }
        ReactDOM.render(<Login/>,document.getElementById("test1"))
    </script>
</body>
</html>

panda没有黑眼圈*~*

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
高阶函数与函数柯里化

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。常见的高阶函数有：Promise：newPromise(()=>{}) setTimeout:newsetTimeout(()=>{}) 数组里一些常见的函数，如arr.map()等等函数柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码...
复制链接

扫一扫