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 相关文章推荐
jquery高级编程的最佳实践详解
Mar 23 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
JSON取值前判断
Dec 23 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
Dec 31 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 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/01/18 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
基于empty函数的判断详解
2013/06/17 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
大学学年自我鉴定
2013/10/28 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
出国签证在职证明
2014/09/20 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS