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 相关文章推荐
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
node实现的爬虫功能示例
May 04 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 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新手用的Insert和Update语句构造类
2012/03/31 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
PHP7新增函数
2021/03/09 PHP
实现动画效果核心方式的js代码
2013/09/27 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
如何理解Python中的变量
2020/06/01 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
中文专业毕业生自荐信
2013/10/28 职场文书
新闻学专业应届生求职信
2013/11/08 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
带薪年假请假条
2014/02/04 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
MySQL约束超详解
2021/09/04 MySQL
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL