关于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 相关文章推荐
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
vant中的toast层级改变操作
Nov 04 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
关于JavaScript 中 if包含逗号表达式
Nov 27 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简单提示框alert封装函数
2010/08/08 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
Python实现端口复用实例代码
2014/07/03 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python3个性签名设计实现代码
2018/06/19 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
初中体育教学反思
2014/01/14 职场文书
师范类求职信
2014/06/21 职场文书
单位委托书格式范本
2014/09/29 职场文书
十岁生日答谢词
2015/01/05 职场文书
趣味运动会标语口号
2015/12/26 职场文书