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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 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的配置文件php.ini
2006/10/09 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP中each与list用法分析
2016/01/08 PHP
不安全的常用的js写法
2009/09/15 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
详解Python:面向对象编程
2019/04/10 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
浅谈Python中的字符串
2020/06/10 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
Python代码注释规范代码实例解析
2020/08/14 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
青年志愿者活动方案
2014/08/17 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
春节晚会开场白
2015/05/29 职场文书
交通处罚决定书
2015/06/24 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python