2021-03-27

新手小白对回调函数的理解

只是写写自己的理解,借鉴了网上的一些文章,欢迎指正!

1.什么是函数

       要了解回调函数,就必须先了解函数。那么,什么是函数呢?

       如果要多处实现某个功能,不用函数的话就要写很多次,增加代码量,浪费时间;如果要修改这个功能,那就要多处修改,非常不方便。使用函数可以减少代码量,方便后期修改。

       在JavaScript 中定义函数的方法有 3 种,即使用 function 语句、使用 Function() 构造函数和定义函数直接量。

     (1)使用 function 语句声明函数。具体用法如下:

            function onDeleteMail ( [args] ) {

                    //statements

            }

       onDeleteMail 是函数名,与变量名一样必须是 JavaScript 合法的标识符。在函数名之后是一个由一个小括号包含的参数列表,参数之间以逗号分隔。参数是可选的,没有数量限制。

        作为标识符,参数仅在函数体内被访问,参数是函数作用域的私有成员。调用函数时,通过为函数传递值,然后使用参数获取外部传入的值,并在函数体内干预函数的运行。

        在小括号之后是一个大括号,大括号内包含的语句就是函数体结构的主要内容,大括号是必不可少的,缺少大括号,JavaScript 将会抛出语法错误。

       function 语句必须包含函数名、小括号和大括号,其他代码都可省略,因此最简单的函数体是一个空函数。

                function  onDeleteMail( ) { }  //空函数

        如果使用匿名函数,则可以省略函数名。

                 function ( ) { }  //匿名空函数

        var 语句和 function 语句都是声明语句,它们声明的变量和函数都在 JavaScript 预编译时被解析,也被称为变量提升和函数提升。在预编译期,JavaScript 引擎会为每个 function 创建上下文,定义变量对象,同时把函数内所有形参、私有变量、嵌套函数作为属性注册到变量对象上。

      (2)Function() 构造函数// 此方法并不常用

        使用 Function( ) 构造函数可以快速生成函数。具体用法如下:

         var  boy = new Function (p1 , p2 , ... , pn , body) ;

        Function( ) 的参数类型都是字符串,p1~pn 表示所创建函数的参数名称列表,body 表示所创建函数的函数结构体语句,在 body 语句之间以分号分隔。

         使用 Function( ) 构造函数可以不指定任何参数,创建一个空函数结构体。

             var f = new Function( ); //定义空函数

       使用 Function() 构造函数可以动态的创建函数,它不会把用户限制在 function 语句预声明的函数体中。使用 Function() 构造函数能够把函数当做表达式来使用,而不是当做一个结构,因此使用起来会更灵活。其缺点就是,Function() 构造函数在执行期被编译,执行效率非常低,一般不推荐使用。

    (3)匿名函数(函数直接量)

       函数直接量也称为匿名函数,即函数没有函数名,仅包含 function 关键字、参数和函数体。具体用法如下:

             function ( [args] ) {

                         // statements

              }

         示例1:

        下面代码定义一个函数直接量。

              //函数直接量

              function ( a , b ){

                   return a+b;

               }

        在上面代码中,函数直接量与使用 function 语句定义函数结构基本相同,它们的结构都是固定的。但是函数直接量没有指定函数名,而是直接利用关键字 function 来表示函数的结构,这种函数也被称为匿名函数。

       示例2:

       匿名函数就是一个表达式,即函数表达式,而不是函数结构的语句。下面把匿名函数作为一个值赋值给变量 f。

         //把函数作为一个值直接赋值给变量 f

          var  f = function ( a, b){

              return a+b;

          };

        当把函数结构作为一个值赋值给变量之后,变量就可以作为函数被调用,此时变量就指向那个匿名函数。

        console.log ( f ( 1,2 ) );  //返回值3

       示例3:

       匿名函数作为值,可以参与更复杂的表达式运算。针对上面示例可以使用以下代码完成函数定义和调用一体化操作。

       //把函数作为一个操作数进行调用

         console.log( 

                ( function(a,b) {

                         return a+ b;

                })(1,2));  //返回数值3

     (4)定义嵌套函数

       JavaScript 允许函数相互嵌套,因此可以定义复杂的嵌套结构函数。

       示例1:

       使用 function 语句声明两个相互嵌套的函数体结构。

            function  f (x,y) {  //外层函数

                     functione (a,b){   //内层函数

                              return  a*b ;

                      }

                      return  x+y;

           }

         示例2:

               嵌套的函数只能在函数体内可见,函数外不允许直接访问、调用。

                function  f (x,y) {

                       function   e (a,b) {

                                 return  a*b;

                       }

                      return   e (3, 6) + y;    //内层函数参与表达式运算有效

                      console.log  (e (3,6) );  //无效的调用

              }

             console.log ( f (3,6) ) ;    //调用外层函数

2.什么是回调函数

       回调函数就是一个被作为参数传递给另一个函数,回调函数早另一个函数中被调用。众所周知,函数被大量使用的原因即为:一段代码需要被多处调用,将此段代码封装至一个函数体内,可在多处调用,减少代码量。而回调函数是为了解决多处调用时,后续操作的不同。比如说,周五了老师给同学们布置作业,老师可以选择分别给每一个同学布置一遍作业,也可以将同学们聚到一起,一次就把作业布置完成。这就像一个函数,封装一次,多次使用。但是老师把作业布置好以后。每个学生会用自己的方式完成,可能有些学生周五全部写完,有些同学攒到周天才写作业,这就是回调函数。

       那么什么时候回调函数会进行调用吗?

       ① 发生事件时,例如,用户单击按钮,或者用户从下拉列表中选择某些选项等等。

        示例:DOM事件回调函数

          documet . getElementById ('btn') .onclick = function( ){

                 alert  'hello world' ;

          };

      ② 定时器回调函数

         setTimeout  ( function( ){

                console.log('两秒过去了');

         } , 2000  );

    

  

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容

  • Vue核心概念 vue实例化 虚拟dom 模板编译 数据绑定(响应式) 组件化 MVVM model和view层通...
    斗伽阅读 800评论 0 12
  • 方法 在一个对象中绑定函数,称为这个对象的方法。 在JavaScript中,对象的定义是这样的: 但是,如果我们给...
    wit92阅读 450评论 0 0
  • 前面的话 函数是所有编程语言的重要组成部分,在ES6出现前,JS的函数语法一直没有太大的变化,从而遗留了很多问题,...
    CodeMT阅读 812评论 0 1
  • Python #for循环 计数循环 #i是代表接受到字符串遍历出来的每一个元素 #'python'是可迭代对象 ...
    70e85f2a51b8阅读 68评论 0 0
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,548评论 0 11