一文彻底理解JS回调函数

 更新时间:2022年12月13日 17:10:52   作者:dkvirus  
回调函数是从一个叫函数式编程的编程范式中衍生出来的概念,简单来说,函数式编程就是使用函数作为变量,这篇文章主要介绍了一文彻底理解JS回调函数,需要的朋友可以参考下

一、前奏

在谈回调函数之前,先看下下面两段代码:
不妨猜测一下代码的结果。

function say (value) {
    alert(value);
}
alert(say);
alert(say('hi js.'));

如果你测试了,就会发现:

只写变量名 say 返回的将会是 say方法本身,以字符串的形式表现出来。

而在变量名后加()如say()返回的就会使say方法调用后的结果,这里是弹出value的值。

二、js中函数可以作为参数传递

再看下面的两段代码:

function say (value) {
    alert(value);
}
function execute (someFunction, value) {
    someFunction(value);
}
execute(say, 'hi js.');

function execute (someFunction, value) {
    someFunction(value);
}
execute(function(value){alert(value);}, 'hi js.');

上面第一段代码是将say方法作为参数传递给execute方法
第二段代码则是直接将匿名函数作为参数传递给execute方法

实际上:

function say (value) {
    alert(value);
}
// 注意看下面,直接写say方法的方法名与下面的匿名函数可以认为是一个东西
// 这样再看上面两段代码是不是对函数可以作为参数传递就更加清晰了
say;

function (value) {
    alert(value);
}

这里的say或者匿名函数就被称为回调函数。

三、回调函数易混淆点——传参

如果回调函数需要传参,如何做到,这里介绍两种解决方案。

  • 将回调函数的参数作为与回调函数同等级的参数进行传递

回调函数传参方法1

  • 回调函数的参数在调用回调函数内部创建

回调函数参数在调用回调函数内部创建

四、写在最后

回调函数应用场景多用在使用 js 写组件时,尤其是组件的事件很多都需要回调函数的支持。
关于回调函数还有什么问题可以在下面留言,一起交流。

到此这篇关于一文彻底理解JS回调函数的文章就介绍到这了,更多相关js回调函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

    微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

    这篇文章主要介绍了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法,较为详细的分析了预览图片接口及与拍照或手机相册中选图接口的功能、调用方法与相关使用技巧,需要的朋友可以参考下
    2016-10-10
  • 用JS做的简单的可折叠的两级树形菜单

    用JS做的简单的可折叠的两级树形菜单

    可折叠的树形菜单想必大家并不陌生吧,实现方法有多种,在本文将为大家介绍下js是如何实现的,希望对大家有所帮助
    2013-09-09
  • Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题

    Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题

    这篇文章主要介绍了 Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题,需要的朋友可以参考下
    2017-02-02
  • js代码判断是否处于微信浏览器内两种方式

    js代码判断是否处于微信浏览器内两种方式

    微信内置浏览器屏蔽了下载链接,如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,那么该如何判断用户是否是用微信浏览器呢?这篇文章主要给大家介绍了关于js代码判断是否处于微信浏览器内的两种方式,需要的朋友可以参考下
    2023-10-10
  • Javascript !!的作用

    Javascript !!的作用

    取变量的Boolean值
    2008-12-12
  • 简单实现JS倒计时效果

    简单实现JS倒计时效果

    这篇文章主要教大家如何简单实现JS倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • uniapp路由uni-simple-router使用示例

    uniapp路由uni-simple-router使用示例

    这篇文章主要为大家介绍了uniapp路由uni-simple-router使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 什么是JavaScript的防抖与节流

    什么是JavaScript的防抖与节流

    这篇文章主要介绍了什么是JavaScript的防抖与节流,防抖是在频繁触发某一个事件时,一段时间内不再触发该事件后才会去调用对应的回调函数,在设定间隔时间内如果下一次事件被触发, 那么就重新开始定时器,直到事件触发结束,节流看下面文章的具体介绍吧

    2021-12-12
  • JavaScript迭代器的含义及用法

    JavaScript迭代器的含义及用法

    这篇文章主要介绍了JavaScript迭代器的含义及用法,迭代器就是为实现对不同集合进行统一遍历操作的一种机制,只要给需要遍历的数据结构部署Iterator接口,通过调用该接口,或者使用消耗该接口的API实现遍历操作。,需要的朋友可以参考下
    2019-06-06
  • javascript下拉列表中显示树形菜单的实现方法

    javascript下拉列表中显示树形菜单的实现方法

    这篇文章主要介绍了javascript下拉列表中显示树形菜单的实现方法,需要的朋友可以参考下
    2015-11-11

最新评论