什么是闭包，以及闭包应用

布满荆棘的人生 2022-12-19 06:22 171阅读 0赞

### 变量的作用域复习 ###

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

1.  函数内部可以使用全局变量。
2.  函数外部不可以使用局部变量。
3.  当函数执行完毕，本作用域内的局部变量会销毁！！。

### 什么是闭包 ###

闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。

### 作用 ###

1.例如访问 某个函数内的变量，

#### 延伸了变量的作用范围， ####

例如只有所有的方法都调用完了，变量才销毁（闭包就是一种高阶函数）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]

### 闭包的案例 ###

1.  利用闭包的方式得到当前li 的索引号

for (var i = 0; i < lis.length; i++) { 
    // 利用for循环创建了4个立即执行函数
    // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
    (function(i) { 
        lis[i].onclick = function() { 
          console.log(i);
        }
     })(i);
    }

1.  利用闭包的方式得到当前li 的索引号

1.  闭包应用-3秒钟之后,打印所有li元素的内容

for (var i = 0; i < lis.length; i++) { 
       (function(i) { 
         setTimeout(function() { 
         console.log(lis[i].innerHTML);
         }, 3000)
       })(i);
    }

1.  闭包应用-计算打车价格

/*需求分析 打车起步价13(3公里内), 之后每多一公里增加 5块钱. 用户输入公里数就可以计算打车价格 如果有拥堵情况,总价格多收取10块钱拥堵费*/
    
     var car = (function() { 
         var start = 13; // 起步价 局部变量
         var total = 0; // 总价 局部变量
         return { 
           // 正常的总价
           price: function(n) { 
             if (n <= 3) { 
               total = start;
             } else { 
               total = start + (n - 3) * 5
             }
             return total;
           },
           // 拥堵之后的费用
           yd: function(flag) { 
             return flag ? total + 10 : total;
           }
    	}
     })();
    console.log(car.price(5)); // 23
    console.log(car.yd(true)); // 33

练习题

### 总结![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1] ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ff73a3f21b404f389cad686ec056d9bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/693c9da8e5694a73adca42eb7454ad93.png