关于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 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 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数组交集的优化代码分析
2011/03/06 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
PHP生成压缩文件实例
2015/02/07 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
JS中的多态实例详解
2017/10/15 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
python简单实现操作Mysql数据库
2018/01/29 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
小程序自定义轮播图圆点组件
2022/06/25 Javascript