秒懂高阶编程之函数绑定及柯理化函数思想

简介: 秒懂高阶编程之函数绑定及柯理化函数思想

在介绍柯理化函数思想之前我先讲一个定义,叫函数绑定。

所谓函数绑定,就是要创建一个函数,可以在特定的this环境中以指定参数调用另一个函数。通常和回调函数与事件处理程序一起使用。通俗来说就是改变this指向。

柯理化函数的思想:
柯理化函数简单的说就是一个大函数返回一个小函数,原理就是利用闭包的机制,把一些内容实现存储和处理了,等到后期需要的时候拿来即用即可 。
举个例子,假如有一个div, div有过一个事件,点击想要执行相应操作。代码如下:

<div class="box" id="box">这是一个盒子</div>
<script>
  let obj = {
      x: 100
  }
 function fn (y) {
    console.log(y);
    this.x += y;
    console.log(this);
 }
 box.onclick = fn.call(obj, 200);
</script>
AI 代码解读

柯理化函数1.gif

如上代码,我们想点击box,然后事件会触发,最后打印this。先不考虑别点,我们这么写的想法是想让,this的指向是obj,但是实际的结果却不是,看到控制台打印的结果是box这个元素。
对于这种情况,我们首先想到的就是改变this指向,利用bind,如下:

<div class="box" id="box">这是一个盒子</div>
<script>
  let obj = {
      x: 100
  }
 function fn (y) {
    console.log(y);
    this.x += y;
    console.log(this);
 }
 box.onclick = fn.bind(obj);
</script>
AI 代码解读

柯理化函数2.gif

这回我们再看一下输出。这回便是我们想要的。但此时没有传参,所有y是MouseEvent,所以传参的话结果如下:

<div class="box" id="box">这是一个盒子</div>
<script>
  let obj = {
      x: 100
  }
 function fn (y) {
    console.log(y);
    this.x += y;
    console.log(this);
 }
 box.onclick = fn.bind(obj,200);
</script>
AI 代码解读

柯理化函数3.gif

但是有一个问题,这个问题就是bind不兼容IE6/7/8,由此我们能想到的是applycall,但它们两个都是将函数改变this指向,并立即执行。
由这个特点。我们不能直接将函数写成如下形式:

<div class="box" id="box">这是一个盒子</div>
<script>
  let obj = {
      x: 100
  }
 function fn (y) {
    console.log(y);
    this.x += y;
    console.log(this);
 }
 box.onclick = fn.call(obj, 200);
</script>
AI 代码解读

柯理化函数4.gif

这样写的结果,函数被立即执行。这显然不是我们想要的结果。
我们改动一下:

<div class="box" id="box">这是一个盒子</div>
<script>
  let obj = {
      x: 100
  }
 function fn (y) {
    console.log(y);
    this.x += y;
    console.log(this);
 }
 box.onclick = function () {
  fn.call(obj, 200);
}
</script>
AI 代码解读

柯理化函数5.gif

这样的结果我们再来看看。没错,这样依旧符合我们想要的结果。
这个过程我们做了什么呢,我们将点击事件绑定一个匿名函数,这个匿名函数里将函数的this执行改变并执行。这里的实际上是预先处理this,预先传递一些参数,整个操作是让函数在某些情况下才去执行,而不是立即执行。相当于把一些内容或者事情提前处理了,等到需要的时候在拿来用。这也是利用了闭包的保存机制,这个过程就是函数柯理化的思想。
再举另一个例子理解一下。假如一个定时器想要执行1s后执行fn这个方法。

<div class="box" id="box">这是一个盒子</div>
    <script>
        let obj = {
            x: 100
        }
        function fn (y) {
            console.log(y)
            this.x += y;
            console.log(this);
        }
        setTimeout(fn, 1000);
    </script>
AI 代码解读

柯理化函数6.gif

上面的写法没办法传参,况且this也不是我们想要的。
改成:

 setTimeout(fn(200), 1000);
AI 代码解读

柯理化函数7.gif

这样虽然传参了,但this依旧不是我们想指向的obj,同时此时是相当于在立即将fn的结果输出而已。如果传参再改变this指向改成一下:

setTimeout(fn.call(obj,200), 1000);
AI 代码解读

柯理化函数8.gif

这样的结果就是函数会立即执行了,并不是想要的在1s后执行fn函数。
按照上面的思想,思路我们可以改成:

setTimeout(function(){fn.call(obj,200)}, 1000);
AI 代码解读

柯理化函数9.gif

这样的结果就是1s后执行匿名函数,再执行的同时会将fn执行。
以上的讲解不知你是否对柯理化编程思想时候有一些些的理解。希望对你有所帮助。

目录
打赏
0
0
0
0
106
分享
相关文章
【WEB安全】Apache Shiro 反序列化漏洞(上)
Apache Shiro是一款开源企业常见JAVA安全框架,提供身份验证、授权、密码学和会话管理。java中的权限框架有SpringSecurity和Shiro,由于Spring功能强大但复杂,Shiro的简单强大,扩展性好因此用的还是很多。
900 0
【WEB安全】Apache Shiro 反序列化漏洞(上)
DIY nas 之照片备份工具
Immich是一个开源解决方案,主要用于直接从iPhone、Android手机上备份照片与视频。用户可以将Immich部署到自己的电脑、NAS或服务器中,并通过App进行备份
709 2
【秋招面试】分享一则大数据面经:货拉拉大数据平台实习岗
【秋招面试】分享一则大数据面经:货拉拉大数据平台实习岗
213 0
RN运行项目Error:Unable to resolve module
RN运行项目Error:Unable to resolve module
1199 0
RN运行项目Error:Unable to resolve module
解锁数据洞察:通过 DataWorks 获得深度数据分析
DataWorks提供了一种全新的数据洞察功能,通过深度数据分析和可视化,为您的业务决策提供有力支持。了解更多如何利用AI技术解析复杂数据。
357 7
解锁数据洞察:通过 DataWorks 获得深度数据分析
【SpringCloud Alibaba系列】一文全面解析Zookeeper安装、常用命令、JavaAPI操作、Watch事件监听、分布式锁、集群搭建、核心理论
一文全面解析Zookeeper安装、常用命令、JavaAPI操作、Watch事件监听、分布式锁、集群搭建、核心理论。
【SpringCloud Alibaba系列】一文全面解析Zookeeper安装、常用命令、JavaAPI操作、Watch事件监听、分布式锁、集群搭建、核心理论
云计算安全:AWS与Azure的安全策略与实践比较
【10月更文挑战第27天】本文对比分析了AWS和Azure在云计算安全领域的策略与实践,涵盖技术、定价、混合云工具等方面。通过代码示例展示了如何在两个平台上实施安全措施,如监控告警、数据加密和身份管理。总结了两者的优缺点,帮助读者根据具体需求选择合适的云服务提供商。
203 4
使用 prange 实现 for 循环的并行
使用 prange 实现 for 循环的并行
271 1
使用 prange 实现 for 循环的并行
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问