关于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动画浅析
Aug 30 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
jquery图片切换插件
Mar 16 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
js作用域和作用域链及预解析
Apr 11 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
教你如何使用php session
2013/10/28 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python 自定义对象的打印方法
2019/01/12 Python
Python实现井字棋小游戏
2020/03/09 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
历史学专业个人的自我评价
2013/10/13 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
家长对孩子的评语
2014/04/18 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
党校学习个人总结
2015/02/15 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
叶问观后感
2015/06/15 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
vscode中使用npm安装babel的方法
2021/08/02 Javascript
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers