关于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 & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
javascript dom 操作详解 js加强
Jul 13 Javascript
IE8 中使用加速器(Activities)
May 14 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
javascript json字符串到json对象转义问题
Jan 22 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设计模式 Factory(工厂模式)
2011/06/26 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
详解JS函数重载
2014/12/04 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
node.js的事件机制
2017/02/08 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
python中os.remove()用法及注意事项
2021/01/31 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
家庭户外服装:Hawkshead
2017/11/02 全球购物
出纳岗位职责模板
2013/11/27 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
温馨提示标语
2014/06/26 职场文书
法制演讲稿
2014/09/10 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
房产公证书
2015/01/23 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
天河观后感
2015/06/11 职场文书
js之ajax文件上传
2021/05/13 Javascript