关于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 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
js实现聊天对话框
Feb 08 Javascript
vue实现登录拦截
Jun 29 Javascript
Echarts如何重新渲染实例详解
May 30 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php array_search() 函数使用
2010/04/13 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
php源码的使用方法讲解
2019/09/26 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python设计模式之观察者模式实例
2014/04/26 Python
python3编码问题汇总
2016/09/06 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
中层竞聘演讲稿
2014/01/09 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书