关于函数的柯里化

最新推荐文章于 2024-09-15 10:33:02 发布

平光镜后的小呆毛

最新推荐文章于 2024-09-15 10:33:02 发布

阅读量263

点赞数

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/qq_53635710/article/details/125901242

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是函数的科里化？

通过函数调用返回函数的方式，实现多次接受参数最后统一处理的方式。

（函数的柯里化本质就是写高级函数）

什么是高级函数?

1.若A函数接受的参数是一个函数那么这个函数就是高级函数

2.若A函数返回的结果是一个函数，那么这个函数就是高级函数

以一个简单react页面为例

点击登录后效果。

需要实现两个效果：

1.输入密码/账号时随时在state中保存其数据

2.提交后显示当时数据

两个dom调用的是相同的函数，仅仅是传的参数不同。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>

    <!-- 引入核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入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，babel翻译
      class Login extends React.Component {
        state = {
          // 初始化状态
          username: "",
          password: "",
        };

        handleSubmit = (event) => {
          event.preventDefault(); //阻止表单提交。
          const { username, password } = this.state;
          alert(`账号是：${username},密码是：${password}`);
        };

        /* 
        为什么要拿一个函数作为返回值？
        因为password和username这两个dom需要两个参数：dataType和event来实现受控组件。
      

        什么是高级函数?
        1.若A函数接受的参数是一个函数那么这个函数就是高级函数
        2.若A函数返回的结果是一个函数，那么这个函数就是高级函数
        
        什么是函数的科里化？
        通过函数调用返回函数的方式，实现多次接受参数最后统一处理的方式。*/
        saveFormData = (dataType) => {
          return (event) => {
            console.log(dataType);
            //   对象中所有的属性名称都是字符串。
            this.setState({ [dataType]: event.target.value });
          };
        };

        render() {
          //onSubmit  提交表单时调用回调函数
          return (
            <form onSubmit={this.handleSubmit} action="http://www.baidu.com">
              用户名：
              <input
                onChange={this.saveFormData("username")}
                ref={(c) => (this.username = c)}
                type="text"
                name="username"
              />
              密码：
              <input
                ref={(c) => (this.password = c)}
                onChange={this.saveFormData("password")}
                type="password"
                name="password"
              />
              <button>登陆</button>
            </form>
          );
        }
      }
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>
  </body>
</html>