JavaScript回调函数详解

小鱼儿 2022-06-17 06:47 246阅读 0赞

## 介绍 ##

相信很多做后端的特别是java程序员写JavaScript都有点写不惯，其中重要原因之一就是搞不清楚回调函数。  
什么是回调函数呢？ 其实回调函数的基本思想就是

> 通过把一个函数的指针，当做另外一个函数的参数，这个函数就叫回调函数。

回调函数有三种实现方式，下面我来一一介绍：

--------------------

## 通过指针来调用 ##

首先上例子：

这是一段程序，用来比较两个数值的大小。

<script type="text/javascript"> function max(num1,num2) { if(num1>num2){ return num1; } else { return num2; } } function min(num1,num2) { if(num1<num2){ return num1; } else { return num2; } } function math1(num1,num2) { return min(num1,num2); } alert(alert(math1(10,20))); </script>

这是我们后端程序最先想到的写法，但是JavaScript中能传入指针，这样的坏处就是太死板  
如果我们想改为比较 max 的，需要改动原来的方法的源代码来调用。  
但是javascript能使用指针调用。于是摇身一变就能变成这样。

<script type="text/javascript">
      /** * * @param num1 * @param num2 * @param fun 函数指针 * @returns {*} */
            function math2(num1,num2,fun) {
                return fun(num1,num2);
            }
    
    
            function max(num1,num2) {
                if(num1>num2){
                    return num1;
                }
                else {
                    return num2;
                }
            }
    
            function  min(num1,num2) {
                if(num1<num2){
                    return num1;
                }
                else {
                    return num2;
                }
            }
            //比较最大的
            alert(math2(10,20,max));
            //比较较小的
            alert(math2(10,20,min));
    
    
     </script>

这就是通过函数指针来调用。  
通过把一个函数的指针，当做另外一个函数的参数，这个函数就叫回调函数

--------------------

## 通过匿名函数来调用 ##

由于JavaScript中 函数可以这么定义

var  a1 = func(aa,bb,cc){
       alert("aa+bb+cc");
    }

我们。  
于是我们可以化简上面的写法

<script type="text/javascript">
        /** * * @param num1 * @param num2 * @param fun 函数指针 * @returns {*} */
            function math2(num1,num2,fun) {
                return fun(num1,num2);
            }
    
           alert( math2(10,20,function (num1,num2) {
               if(num1<num2){
                   return num1;
               }
               else {
                   return num2;
               }
           }))
        </script>

类似于我们Java中的 模板设计模式， 里面就有钩子函数。

alert(
    
          (function math3(num1,num2,fun) { 
               return fun(num1,num2);
           })(10,20,function (num1,num2) { 
               if(num1<num2){
                   return num1;
               }
               else {
                   return num2;
            }
            })
    
           )

--------------------

## 定义和方法同时执行的方式 ##

这种其实换汤不换药，是第二种的改进版

我们完全可以想想成以下的

var math=function math3(num1,num2,fun) {
               return fun(num1,num2);
           }
    
    
    alert(
        math(10,20,function (num1,num2) {
               if(num1<num2){
                   return num1;
               }
               else {
                   return num2;
            }
            })
          )

发表评论取消回复

表情：

评论列表（有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 回调函数参数传递技巧

在 JavaScript 中，回调函数是一种常见的编程模式，它可以让我们在异步执行任务时，优雅地处理返回结果。然而，随着 JavaScript 代码的不断发展，我们可能会遇到一

电玩女神/ 2023年10月13日 20:42/ 0 赞/ 22 阅读

相关回调函数详解

回调函数详解作者： Ackarlix 一、回调函数我们经常在C++设计时通过使用回调函数可以使有些应用（如定时器事件回调处理、用回调函数记录某操作进度等）变得非常方便

约定不等于承诺〃/ 2022年09月19日 13:29/ 0 赞/ 253 阅读

相关回调函数详解

英文名称　　Callback Function 概述　　对于很多初学者来说，往往觉得回调函数很神秘，很想知道回调函数的工作原理。本文将要解释什么是回调函数、它们有什么

偏执的太偏执、/ 2022年07月14日 12:19/ 0 赞/ 186 阅读

相关 c++回调函数详解（zt）

一回调函数　　我们经常在C++设计时通过使用回调函数可以使有些应用（如定时器事件回调处理、用回调函数记录某操作进度等）变得非常方便和符合逻辑，那么它的内在机制如何呢，怎么定

缺乏、安全感/ 2022年07月11日 19:30/ 0 赞/ 210 阅读

相关 JavaScript回调函数详解

介绍相信很多做后端的特别是java程序员写JavaScript都有点写不惯，其中重要原因之一就是搞不清楚回调函数。什么是回调函数呢？其实回调函数的基本思想就是

小鱼儿/ 2022年06月17日 06:47/ 0 赞/ 247 阅读

相关 JavaScript回调函数

一种场景 js需要等待一个函数执行完后再执行另一个函数或者其他的操作。本编以最简单的例子来说明回调函数的执行过程。回调函数备注上就是以函数对象作为参数进行传递。 de

左手的ㄟ右手/ 2022年05月25日 01:10/ 0 赞/ 235 阅读

相关 Javascript中的回调函数

参考文章：[https://www.zhihu.com/question/19801131/answer/91780287][https_www.zhihu.com_quest

港控/mmm°/ 2022年04月04日 12:30/ 0 赞/ 331 阅读

相关 JavaScript函数基础（三）之回调函数

1、什么是回调函数你定义的你没有调但是最终执行了（某个时刻【定时器】或者某个条件下【按钮点击事件】） 2、常见的回调函数====

ゝ一纸荒年。/ 2022年01月23日 12:29/ 0 赞/ 270 阅读

相关回调与回调函数

回调与回调函数回调回调函数回调回调指的是某函数在执行的时候，由于某些原因，该函数被迫中止执行，交出当前线程的使用权，当前线程转而执行其它函

悠悠/ 2021年09月25日 04:26/ 0 赞/ 565 阅读

相关 JavaScript系列之回调函数callback

JavaScript系列之回调函数callback JavaScript回调函数的使用是很常见的，引用官方回调函数的定义： > A callback is a functi

今天药忘吃喽~/ 2021年08月13日 12:55/ 0 赞/ 444 阅读