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 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
Javascript缓存API
Jun 14 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 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技术开发客服工单系统
2016/01/06 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
python处理按钮消息的实例详解
2017/07/11 Python
用Python实现随机森林算法的示例
2017/08/24 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
房地产员工找工作的自我评价
2013/11/15 职场文书
安全生产先进个人材料
2014/02/06 职场文书
开业典礼主持词
2014/03/21 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
代理协议书
2014/04/22 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
写给老师的保证书
2015/05/09 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书