JS回调函数深入理解


Posted in Javascript onOctober 16, 2019

本文实例讲述了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或者匿名函数就被称为回调函数。

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

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

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

JS回调函数深入理解

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

JS回调函数深入理解

四、写在最后

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

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 #Javascript
js实现图片跟随鼠标移动效果
Oct 16 #Javascript
vue实现鼠标经过动画
Oct 16 #Javascript
javascript实现动态时钟的启动和停止
Jul 29 #Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 #Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 #Javascript
javascript实现点亮灯泡特效示例
Oct 15 #Javascript
You might like
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
使用python 3实现发送邮件功能
2018/06/15 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Pytorch转tflite方式
2020/05/25 Python
python右对齐的实例方法
2020/07/05 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
《蜗牛》教学反思
2014/02/18 职场文书
小学教师自我评价
2015/03/04 职场文书
2015年环保局工作总结
2015/05/22 职场文书
Go 中的空白标识符下划线
2022/03/25 Golang