高阶函数和回调函数的区别

简介: 高阶函数和回调函数的区别

今天看到高阶函数的概念,突然就迷不过来了,这个高阶函数和回调有什么区别呢?

高阶函数英文叫Higher-order function。那么什么是高阶函数?

刚开始学习语言我最害怕看到这种XX函数的,一看到就想跳过,结果跳过了发现后面好多知识点都无法理解。 我们完全没必要把它想的多么高深,其实高阶函数你在学习到这个阶段的时候已经使用过很多高阶函数了,只不过你之前不知道它们还有这个特殊的称呼。 最简单的例子就是

setTimeout(fn,delay)

一个函数A接收另外一个函数B作为参数,那么这个函数A就叫做高阶函数,fn就叫做setTimeout的回调函数。 记住一点,高阶函数和回调函数的概念是两个函数相互搭配使用,才能叫做高阶函数和或者某某函数的回调函数的。单独的一个函数fn是无法叫做高阶函数的!

回调函数的概念我写过一篇博客,如有需要,可以翻看我的个人文章,内容没有专业名词,简单易懂。

函数还有一个方式也可以成为高阶函数,那就是返回值也是一个函数。如果你了解过防抖和节流,你可能一下子就会明白这个使用方法。下面例子与防抖节流无关。 到这里你就已经可以分清楚什么是高阶函数和回调函数了。

分割线,以下是这个概念自己写的进阶笔记,写的比较绕,初学者可能看不懂代码,请选择观看。

<------------------------------------------------------>

image.png

这是我写的一段代码,我想实现的功能是当我鼠标移动到li标签里时候,出现删除的按钮。

image.png

image.png

image.png

逻辑是我需要判断li标签的id是否和它的索引相同,然后把button的opacity改变。这里使用的是

image.png

image.png

因为我需要传递参数数组的id值,给onMouseEnter这个函数的回调函数也就是handleMOuse,但是我们需要搞清楚的是下面写法的原因👇为什么要这样写。

image.png

不管是onClick和OnChange等这些事件,都需要一个函数作为它的回调来使用,注意!这些事件需要你给它提供一个函数

onMouseEnter={handleMouse(iterm.id)}

当你这样写的时候,你需要明白,浏览器调用render()函数的时候,你的handleMouse是函数名,但是一旦你带括号,就说明你在执行它!!!!这个概念非常重要,需要理清楚。所以走到这一行会执行这个函数, 但是如果这时候你这个函数的返回值为空或者不为函数,那么就不会得到你想要的结果,那么我们的目的就是让浏览器先执行一个函数A(目的是拿到参数),然后让函数A再返回一个函数B,这时候函数B才是触发这个具体事件的函数。

很绕,需要多多理解。

image.png

上面代码的意思是,当浏览器调用render方法的时候,会首先执行

image.png

这段代码,然而这段代码函数A的作用只是把我们需要的参数传递进去,真正意义上的函数是这个函数A的返回值

image.png

这里的e才是 onMOuseEnter事件对象。至此我们拿到了我们需要对比的参数并且进行逻辑判断。

高阶组件


image.png

有什么用呢?包装组件把被包装组件加工以后,返回一个新的组件。

可以看作 包装组件是被包装组件的父组件,那么就会给 被包装组件一个props属性

相关文章
|
21天前
|
设计模式 Python
学习函数的参数传递和返回值
在编写函数时,不可避免地会出现一些错误。通过调试代码,查看参数的值在函数内部的变化以及返回值是否符合预期,有助于更好地理解参数传递和返回值的机制。
|
2月前
|
C#
C#的方法的参数传递
C#的方法的参数传递
24 0
|
7月前
|
存储 Python
Python函数参数传递
Python函数参数传递
67 1
|
7月前
|
存储
07-python函数的进阶-函数的多返回值/函数的多种传参方式/匿名函数/lambda函数
07-python函数的进阶-函数的多返回值/函数的多种传参方式/匿名函数/lambda函数
|
7月前
|
人工智能 机器人 中间件
【C++】C++回调函数基本用法(详细讲解)
【C++】C++回调函数基本用法(详细讲解)
|
搜索推荐 Java C语言
c++回调函数详解及实现(lambda)
c++回调函数详解及实现(lambda)
柯里化函数简单实现
柯里化是一种函数式编程技术,可以将一个接受多个参数的函数转换成一系列接受一个参数的函数,这些函数可以在被顺序调用的过程中逐步累积参数,最终返回结果。
|
JavaScript 前端开发
特殊函数:匿名函数的两种应用(①回调函数②自调函数)
特殊函数:匿名函数的两种应用(①回调函数②自调函数)
137 0
特殊函数:匿名函数的两种应用(①回调函数②自调函数)
|
前端开发 JavaScript
web前端-JavaScript中的函数(创建,参数,返回值,方法,函数作用域,立即执行函数)
web前端-JavaScript中的函数(创建,参数,返回值,方法,函数作用域,立即执行函数)
107 0
|
JavaScript 前端开发
【JavaScript】39_高阶函数(回调函数)
目前我们的函数只能过滤出数组中age属性小于18的对象, 我们希望过滤更加灵活: 比如:过滤数组中age大于18的对象 age大于60的对象 age大于n的对象 过滤数组中name为xxx的对象 过滤数组中的偶数 ... **一个函数的参数也可以是函数,** 如果将函数作为参数传递,那么我们就称这个函数为**回调函数**(callback) ```html <script> class Person { constructor(name,age){ this.name = name;
96 0