当前位置: 首页 > 编程笔记 >

JS回调函数深入理解

阴飞星
2023-03-14
本文向大家介绍JS回调函数深入理解,包括了JS回调函数深入理解的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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 写组件时,尤其是组件的事件很多都需要回调函数的支持。
关于回调函数还有什么问题可以在下面留言,一起交流。

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

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

 类似资料:
  • 本文向大家介绍深入理解JS addLoadEvent函数,包括了深入理解JS addLoadEvent函数的使用技巧和注意事项,需要的朋友参考一下 首先是addLoadEvent函数的代码清单: 理解起来就是: 1.把现有的window.onload事件处理函数的值存入变量 oldonload; 2.如果在这个处理函数上还没有绑定任何函数,就像平常那样把新函数添加给它; 3.如果在这个处理函数上已

  • 本文向大家介绍深入理解Node.js 事件循环和回调函数,包括了深入理解Node.js 事件循环和回调函数的使用技巧和注意事项,需要的朋友参考一下 本文详细的介绍了Node.js 事件循环和Node.js回调函数,废话不多说了,具体看下面把。  一、Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高。Node.js 的每一个 API 都是异

  • 本文向大家介绍深入理解JS函数的参数(arguments)的使用,包括了深入理解JS函数的参数(arguments)的使用的使用技巧和注意事项,需要的朋友参考一下 JS函数的参数在function内可以用arguments对象来获取。 参数的调用有两种方式: 1、期望参数的使用。 2、实际传递参数的使用。 应用举例: 需要注意的是: arguments是一个object对象,它不是数组,不能对它使

  • 本文向大家介绍js的回调函数详解,包括了js的回调函数详解的使用技巧和注意事项,需要的朋友参考一下 现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途。我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题“js的回调函数”相关的东西。       说起回调函数,好多人虽然知道意思,但是

  • 本文向大家介绍深入理解vue Render函数,包括了深入理解vue Render函数的使用技巧和注意事项,需要的朋友参考一下 最近在学习vue,正好今日留个笔记,我自己还在摸索学习中,现整理出来以作记录。 会使用基本的Render函数后,就会想,这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶 首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态,对实例

  • 让我们深入研究一下箭头函数。 箭头函数不仅仅是编写简洁代码的“捷径”。它还具有非常特殊且有用的特性。 JavaScript 充满了我们需要编写在其他地方执行的小函数的情况。 例如: arr.forEach(func) —— forEach 对每个数组元素都执行 func。 setTimeout(func) —— func 由内建调度器执行。 ……还有更多。 JavaScript 的精髓在于创建一个