JS回调函数深入理解


Posted in Javascript onOctober 16, 2019

本文实例讲述了JS回调函数。分享给大家供大家参考,具体如下:

一、前奏

在谈回调函数之前,先看下下面两段代码:

不妨猜测一下代码的结果。

function say (value) {
  alert(value);
}
alert(say);
alert(say('hi js.'));

如果你测试了,就会发现:

只写变量名  say   返回的将会是 say方法本身,以字符串的形式表现出来。

而在变量名后加()如say()返回的就会使say方法调用后的结果,这里是弹出value的值。

二、js中函数可以作为参数传递

再看下面的两段代码:

function say (value) {
  alert(value);
}
function execute (someFunction, value) {
  someFunction(value);
}
execute(say, 'hi js.');

function execute (someFunction, value) {
  someFunction(value);
}
execute(function(value){alert(value);}, 'hi js.');

上面第一段代码是将say方法作为参数传递给execute方法

第二段代码则是直接将匿名函数作为参数传递给execute方法

实际上:

function say (value) {
  alert(value);
}
// 注意看下面,直接写say方法的方法名与下面的匿名函数可以认为是一个东西
// 这样再看上面两段代码是不是对函数可以作为参数传递就更加清晰了
say;
function (value) {
  alert(value);
}

这里的say或者匿名函数就被称为回调函数。

三、回调函数易混淆点——传参

如果回调函数需要传参,如何做到,这里介绍两种解决方案。

将回调函数的参数作为与回调函数同等级的参数进行传递

JS回调函数深入理解

回调函数的参数在调用回调函数内部创建

JS回调函数深入理解

四、写在最后

回调函数应用场景多用在使用 js 写组件时,尤其是组件的事件很多都需要回调函数的支持。
关于回调函数还有什么问题可以在下面留言,一起交流。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
PHP守护进程实例
Mar 06 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
小程序实现录音功能
Sep 22 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 #Javascript
js实现图片跟随鼠标移动效果
Oct 16 #Javascript
vue实现鼠标经过动画
Oct 16 #Javascript
javascript实现动态时钟的启动和停止
Jul 29 #Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 #Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 #Javascript
javascript实现点亮灯泡特效示例
Oct 15 #Javascript
You might like
PHP 递归效率分析
2009/11/24 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
php实现图片添加水印功能
2014/02/13 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Python中super的用法实例
2015/05/28 Python
Python datetime包函数简单介绍
2019/08/28 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
python和c语言哪个更适合初学者
2020/06/22 Python
Python日志器使用方法及原理解析
2020/09/27 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
中学学校门卫岗位职责
2014/08/15 职场文书
销售辞职信范文
2015/03/02 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
修辞手法有哪些?
2019/08/29 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang
Java版 单机五子棋
2022/05/04 Java/Android