闭包的理解

什么是闭包

闭包（closure）指有权访问另一个函数作用域中变量的函数。
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收

function fn() {
        var num = 10;
        return function () {
            console.log(num);
        }
    }
    var f = fn();
    f();

image.png
注:我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num

2.闭包的作用

闭包的主要作用: 延伸了变量的作用范围

3.闭包的优缺点

• 优点：可以隔离作用域，不造成全局污染
• 缺点：由于闭包长期驻留内存，则长期这样会导致内存泄露
  如何解决内存泄露：将暴露全外部的闭包变量置为null
  适用场景：封装组件，for循环和定时器结合使用,for循环和dom事件结合.可以在性能优化的过程中,节流防抖函数的使用,导航栏获取下标的使用
  4.闭包的使用场景举例
• 点击li输出当前li的索引号

<ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
  var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
            (function(i){
                lis[i].onclick = function() {
                    console.log(i)
                }

            })(i)
        }

• 在定时器中使用闭包

<ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
var lis = document.querySelector('.nav').querySelectorAll('li')
    for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i)
        }

• 打车计算车费的场景（举例）
  1.闭包应用-计算打车价格
  2.打车起步价13(3公里内), 之后每多一公里增加 5块钱.
  3.用户输入公里数就可以计算打车价格
  4.如果有拥堵情况,总价格多收取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))
     console.log(car.price(4))
     console.log(car.yd(4))

image.png