关于Javascript回调函数的一个妙用


Posted in Javascript onAugust 29, 2016

前言

其实回调函数简单通俗点就是当有a和b两个函数,当a作为参数传给b,并在b中执行,这时a就是一个回调(callback)函数,如果a是一个匿名函数,则为匿名回调函数那下面们来通过一个实例来具体解释下Javascript回调函数怎么使用。

实例

在很久很久以前,有一个人。

var person;

他是个人,也就是一个对象。

person= {}; // 在JavaScript中,花括号就代表是一个对象

他有个名字叫小明。

person.name = '小明';

看一下是不是真的叫小明。

alert(person.name);

嗯,有一天,小明捡到了10块钱。

person.money = '10块钱';

有了钱就要花,于是他打算把10块钱用掉。

小明有一个花钱的方法 spendMoney ()

person.spendMoney =function(){  alert(this.name +"用 "+this.money +" 块钱买了漫画书!");  }

运行:

person.spendMoney();

弹出提示:小明用10块钱买了漫画书。

好了,问题来了,小明花钱就非得买漫画书吗,肯定不是。

事实情况应该是,这钱怎么办,还是由他自己说了算。因为钱在小明的口袋里。

所以,就可以用回调函数了。

回调函数本身就是一个数据类型。

在javaScript中,函数的地位和java中的Stringintboolean等等都是一样的,都可以看成是一个数据类型。

既然是数据类型,当然可以当成参数传递。

于是就应该这样:

person.spendMoney =function(doSomeThing){  doSomeThing();  }

打了个括号就是执行函数的意思。

没打括号的函数,就是和Stringint一样的玩意儿。

是一个数据类型。

一样的。

JAVA里面会这么写:

String str ="HelloWorld!";

在JavaScript中,函数也是一样的。

var say =function(){ 

   alert('HelloWorld');

}

这时候的say就是一个数据类型。

因为没有打括号,打了括号他才会执行!

小明用十块钱做什么,他自己说了算。

person.spendMoney(function(){});

这样就是把函数传进去了。

把函数传入spendMoney方法的目的就是让函数在里面执行的。

所以:

person.spendMoney =function(doSomeThing){  doSomeThing(); }

里面就打了括号,代表要执行这个函数。

具体做什么,自己决定。

person.spendMoney(function(){  alert('还是把钱存起来吧!'); });

总结

就是可以将函数作为一个参数,传入一个方法内,并且能够在该方法中执行这个函数,这也就是js特有的回调函数的魔力。

以上就是关于Javascript回调函数用法的全部内容,希望对大家的学习和工作能有所帮助。如果有疑问可以留言讨论。

Javascript 相关文章推荐
Javascript中的String对象详谈
Mar 03 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 #Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 #Javascript
教你如何在Node.js中使用jQuery
Aug 28 #Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 #Javascript
Node.js 日志处理模块log4js
Aug 28 #Javascript
node.js中 stream使用教程
Aug 28 #Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 #Javascript
You might like
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
重置版游戏视频
2020/04/09 魔兽争霸
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
定义php常量的详解
2013/06/09 PHP
深入PHP变量存储的详解
2013/06/13 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
Python中方法链的使用方法
2016/02/23 Python
不要用强制方法杀掉python线程
2017/02/26 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
python的移位操作实现详解
2019/08/21 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
Python实现手绘图效果实例分享
2020/07/22 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
.NET初级开发工程师面试题
2014/04/18 面试题
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
党员批评与自我批评总结
2014/10/15 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android