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操作cookie插件分享
Jan 14 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 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 CKEditor 上传图片实现代码
2009/11/06 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
jQuery实现表格隔行换色
2018/09/01 jQuery
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
python、Matlab求定积分的实现
2019/11/20 Python
Python解析json代码实例解析
2019/11/25 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
门卫班长岗位职责
2013/12/15 职场文书
给国外客户的邀请函
2014/01/30 职场文书
气象学专业个人求职信
2014/03/15 职场文书
经销商订货会主持词
2014/03/27 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
python中pymysql包操作数据库方法
2022/04/19 Python
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android