非零基础自学前端最后一遍二 JavaScript基础 7 JavaScript函数 7.15 函数回调-匿名函数的概念理解

女爷i 2024-03-24 13:15 13阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  7 JavaScript函数
         *   *  7.15 函数回调-匿名函数的概念理解
             *   *  7.15.1 回调函数（Callback Function）

![在这里插入图片描述][a940198a8f3e4754b8d9ec42f3bdfd17.png_pic_center]

#### 二 JavaScript基础 ####

#### 7 JavaScript函数 ####

##### 7.15 函数回调-匿名函数的概念理解 #####

###### 7.15.1 回调函数（Callback Function） ######

*  既然函数可以作为一个值相互赋值，那么也可以传递给另外一个函数。
    
    ![在这里插入图片描述][1b0ca6c3f5d84d49b1afe08d16be71dd.png_pic_center]
 *  foo这种函数我们也可以称之为高阶函数（Higher-order function）；
 *  高阶函数必须至少满足两个条件之一：
    
     *  接受一个或多个函数作为输入；
     *  输出一个函数；
 *  匿名（anonymous）函数的理解：
    
     *  如果在传入一个函数时，我们没有指定这个函数的名词或者通过函数表达式指定函数对应的变量，那么这个函数称之为匿名 函数。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
    
        // 1.函数回调的概念理解
        // function foo(fn) {
          
        //   // 通过fn去调用bar函数的过程, 称之为函数的回调
        //   fn()
        // }
        // function bar() {
          
        //   console.log("bar函数被执行了~")
        // }
        // foo(bar)
    
    
        // 2.函数回调的案例
        // function request(url, callback) {
          
        //   console.log("根据URL向服务器发送网络请求")
        //   console.log("需要花费比较长的时间拿到对应的结果")
        //   var list = ["javascript", "javascript学习", "JavaScript高级编程"]
        //   callback(list)
        // }
    
        // function handleResult(res) {
          
        //   console.log("在handleResult中拿到结果:", res)
        // }
        // request("url", handleResult)
    
    
        // 3.函数回调的案例重构
        function request(url, callback) {
          
          console.log("根据URL向服务器发送网络请求")
          console.log("需要花费比较长的时间拿到对应的结果")
          var list = ["javascript", "javascript学习", "JavaScript高级编程"]
          callback(list)
        }
    
        // 传入的函数是没有名字, 匿名函数
        request("url", function (res) {
          
          console.log("在handleResult中拿到结果:", res)
        })
    
      </script>
    
    </body>
    
    </html>

运行结果

![在这里插入图片描述][7acad4cddec24eef9448951e507e0e7c.png_pic_center]

![在这里插入图片描述][9a18cea01f3f4b1ab010b92a4b038d0b.png_pic_center]

![在这里插入图片描述][b1f9fae361214f11981c3fe767353110.png_pic_center]

[a940198a8f3e4754b8d9ec42f3bdfd17.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/0e2512de5ec84c5198e24ecd9f87f330.png
[1b0ca6c3f5d84d49b1afe08d16be71dd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/b54d7ab5453c491d8a364c9755fab599.png
[7acad4cddec24eef9448951e507e0e7c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/1093332137c846d3b00cbc2c80fc75fa.png
[9a18cea01f3f4b1ab010b92a4b038d0b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/9879e6e0d38f4724bbd7f5a18ba38a5b.png
[b1f9fae361214f11981c3fe767353110.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/1551f9399d08494bbefc263d1ac68b53.png