关于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 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
javascript 自动填写表单的实现方法
Apr 09 Javascript
Jquery使用val方法读写value值
May 18 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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
处理单名多值表单的详解
2013/06/08 PHP
为你总结一些php系统类函数
2015/10/21 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
iconfont的三种使用方式详解
2018/08/05 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
初步讲解Python中的元组概念
2015/05/21 Python
python3音乐播放器简单实现代码
2020/04/20 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
Vrbo英国:预订度假屋
2020/08/19 全球购物
公司新员工的演讲稿注意事项
2014/01/01 职场文书
服务标兵事迹材料
2014/05/04 职场文书
员工保密协议书
2014/09/27 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书