• JavaScript函数进阶:闭包

    变量作用域

    变量根据作用域的不同分为两种：全局变量和局部变量。

    1. 函数内部可以使用全局变量。

    2. 函数外部不可以使用局部变量。

    3. 当函数执行完毕，本作用域内的局部变量会销毁

    什么是闭包

    闭包（closure）指有权访问另一个函数作用域中变量的函数。  -----  JavaScript 高级程序设计

    简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。 

    1. <script>
    2.  function fn1(){    // fn1 就是闭包函数
    3. 　　　　var num = 10;
    4. 　　　　function fn2(){
    5. 　　　　　　console.log(num); // 10
    6. 　　　　}
    7.        fn2()
    8. 　}
    9.   fn1();
    10. </script>

    被访问变量的是闭包

    在 chrome 中调试闭包

    1. 打开浏览器，按 F12 键启动 chrome 调试工具。

    2. 设置断点。

    3. 找到 Scope 选项（Scope 作用域的意思）。

    4. 当我们重新刷新页面，会进入断点调试，Scope 里面会有两个参数（global 全局作用域、local 局部作用域）。

    5. 当执行到 fn2() 时，Scope 里面会多一个 Closure 参数 ，这就表明产生了闭包。

    闭包的作用

    提问：我们怎么能在 fn() 函数外面访问 fn() 中的局部变量 num 呢 ？

    1. <script>
    2.  function fn() {　　　　
    3.     var num = 10;　　　　
    4.     return function {　　　　　　
    5.          console.log(num); // 10         　　　　
    6.      }
    7.   }
    8.   var f = fn();
    9.   f()
    10. </script>

     闭包作用：延伸变量的作用范围。

    闭包也是高阶函数

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <script>
    13.         // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
    14.         // 一个作用域可以访问另外一个函数的局部变量 
    15.         // 我们fn 外面的作用域可以访问fn 内部的局部变量
    16.         // 闭包的主要作用: 延伸了变量的作用范围
    17.         function fn() {
    18.             var num = 10;
    19.  
    20.             // function fun() {
    21.             //     console.log(num);
    22.  
    23.             // }
    24.             // return fun;
    25.             return function() {
    26.                 console.log(num);
    27.             }
    28.         }
    29.         var f = fn();
    30.         f();
    31.         // 类似于
    32.         // var f = function() {
    33.         //         console.log(num);
    34.         //     }
    35.         // var f =  function fun() {
    36.         //         console.log(num);
    37.  
    38.         //     }
    39.     </script>
    40. </body>
    41.  
    42. </html>

    闭包案例

    1. 点击小li打印出当前小li的索引号

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <style>
    10.         ul li{
    11.             cursor: pointer;
    12.         }
    13.     </style>
    14. </head>
    15.  
    16. <body>
    17.     <ul class="nav">
    18.         <li>榴莲</li>
    19.         <li>臭豆腐</li>
    20.         <li>鲱鱼罐头</li>
    21.         <li>大猪蹄子</li>
    22.     </ul>
    23.     <script>
    24.         // 闭包应用-点击li输出当前li的索引号
    25.         // 1. 我们可以利用动态添加属性的方式
    26.         var lis=document.querySelector('.nav').querySelectorAll('li')
    27.         for(var i=0;i<lis.length;i++){
    28.             // 下面的点击事件是一个异步任务，而是点击了才执行，前面的是同步任务，会先执行，因此i已经变成了4
    29.             lis[i].index=i
    30.             lis[i].onclick=function(){
    31.                 console.log(this.index);
    32.             }
    33.         }
    34.         // 2. 利用闭包的方式得到当前小li 的索引号
    35.         for(var i=0;i<lis.length;i++){
    36.             // 创建了四个立即执行函数 立即执行函数最后面的（）的意思是执行，也可以传入一个参数
    37.             // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它i的变量
    38.             (function(i){
    39.                 // console.log(i);
    40.                 lis[i].onclick=function(){
    41.                 console.log(this.index);
    42.             }
    43.             })(i);
    44.         }
    45.  
    46.     </script>
    47. </body>
    48.  
    49. </html>

    2. 3秒之后打印小li的内容

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <ul class="nav">
    13.         <li>榴莲</li>
    14.         <li>臭豆腐</li>
    15.         <li>鲱鱼罐头</li>
    16.         <li>大猪蹄子</li>
    17.     </ul>
    18.     <script>
    19.         // 闭包应用-3秒钟之后,打印所有li元素的内容
    20.         var lis = document.querySelector('.nav').querySelectorAll('li');
    21.         for(var i=0;i<lis.length;i++){
    22.             // 这个立即执行函数里面的i是用来接收的
    23.             (function(i){
    24.                 setTimeout(function(){
    25.                 console.log(lis[i].innerHTML);
    26.             },3000)
    27.             })(i)
    28.         }
    29.     </script>
    30. </body>
    31.  
    32. </html>

    3. 计算打车价格

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.  
    10. </head>
    11.  
    12. <body>
    13.     <script>
    14.         // 闭包应用-计算打车价格 
    15.         // 打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
    16.         // 如果有拥堵情况,总价格多收取10块钱拥堵费
    17.         // function fn() {};
    18.         // fn();
    19.        var car=(function(){
    20.             var start=13;//起步价
    21.             var total=0;//总价
    22.             return {
    23.                 price:function(n){
    24.                     if(n<=3){
    25.                         total=start;
    26.                     }else{
    27.                         total=start+(n-3)*5
    28.                     }
    29.                     return total;
    30.                 },//正常
    31.                 yd:function(flag){
    32.                     return flag ? total+10 :total
    33.                 }//拥堵
    34.             }
    35.        })();
    36.        console.log(car.price(5));//23
    37.        console.log(car.yd(true));//33
    38.        console.log(car.price(1));//13
    39.        console.log(car.yd(false));//13
    40.     </script>
    41. </body>
    42.  
    43. </html>

     因为立即执行函数，所以start和total都是闭包，可以在函数内部传，因此当console.log(car.yd(true));时原先的total还是23，它是在原有的基础上+10；而下面是覆盖操作

    闭包总结

    1.闭包是什么？   

    闭包是一个函数 （一个作用域可以访问另外一个函数的局部变量）

    2. 闭包的作用是什么？

    延伸变量的作用范围

  • 相关阅读:
    python Flask与微信小程序 统计管理
    大模型之Chat Markup Language
    C#开发的目录图标更改器 - 开源研究系列文章 - 个人小作品
    SQLite vs MySQL vs PostgreSQL对比总结
    1116 Come on! Let‘s C
    Apache Dubbo 首个 Node.js 3.0-alpha 版本正式发布
    机器学习-有监督算法-决策树和支持向量机
    golang知识点整理
    京东商品质量分检测，如何一键检测全店？
    monkeyrunner环境搭建和初步用法
  • 原文地址：https://blog.csdn.net/weixin_64612659/article/details/128058078