关于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+json 通用三级联动下拉列表
Apr 19 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
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 预定义数组
2009/03/16 PHP
php header Content-Type类型小结
2011/07/03 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
jquery实现倒计时代码分享
2014/06/13 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
vue实现信息管理系统
2020/05/30 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Python实现截屏的函数
2015/07/26 Python
Python实现控制台进度条功能
2016/01/04 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
python画图的函数用法以及技巧
2019/06/28 Python
django基于restframework的CBV封装详解
2019/08/08 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Python中os模块功能与用法详解
2020/02/26 Python
python将unicode和str互相转化的实现
2020/05/11 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
公司董事长职责
2013/12/12 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python