关于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中get,post和ajax方法的使用小结
Feb 04 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
angular2中使用第三方js库的实例
Feb 26 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
前端性能优化建议
Sep 17 Javascript
原生js实现无缝轮播图效果
Jan 28 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
substr()函数中文版
2006/10/09 PHP
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
node 版本切换的实现
2020/02/02 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
《最大的“书”》教学反思
2014/02/14 职场文书
矿泉水广告词
2014/03/20 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书