深入浅出讲解Javascript闭包问题+经典面试题

什么是闭包

闭包指有权访问另一个函数作用域中的变量的函数。 —Javascript高级程序设计

在这句话中，要抓住重点：闭包就是函数
简单理解就是：一个作用域可以访问另一个函数内部的局部变量
被访问的这个局部变量所在的函数，就是闭包函数

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

这个断点可以很明白的看出，fn()为闭包函数
代码分析：

num属于fn()函数里面的局部变量，但是fun()可以访问到num这个局部变量，所以这段代码存在闭包现象，并且fn()为闭包函数

闭包的作用

闭包的主要作用：延伸了变量的作用范围
局部变量只有在局部作用域中才可以使用，当这个代码块运行结束后，就会被销毁。闭包的作用就是让局部变量在局部作用域外也可以使用
代码讲解：

//我们fn 外面的作用域可以访问fn内部的局部变量
function fn() {
            var num = 10;
            function fun() {
                console.log(num);
            }  
            return fun;//返回一个函数
        }
        var f = fn(); //用f来接收这个函数 里面存的是fun函数
        f(); //调用fun函数
        //类似于
        /* var f = function fun() {
            console.log(num);
        } */

这段代码实现了在fn外面的作用域，函数f访问了num变量

闭包应用（含经典面试题）

案例一：点击li输出索引号
方法一：利用动态添加属性的方式

<ul class="nav">
        <li>苹果</li>
        <li>火龙果</li>
        <li>葡萄</li>
        <li>樱桃</li>
    </ul>
    <script>
    var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function () {
 // console.log(i); 错误写法 同步异步问题 不管点那个li输出的一直都是4
                console.log(this.index);
            }
        } 
        </script>

方法二：利用闭包的方式得到当前小li的索引号（面试问题）

<ul class="nav">
        <li>苹果</li>
        <li>火龙果</li>
        <li>葡萄</li>
        <li>樱桃</li>
    </ul>
    <script>
    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);
        }
      </script>

案例二：3秒钟之后，打印所有li元素的内容

<ul class="nav">
        <li>苹果</li>
        <li>火龙果</li>
        <li>葡萄</li>
        <li>樱桃</li>
    </ul>
    <script>
        //闭包应用-3秒钟之后，打印所有li元素的内容
      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);
        }
    </script>

案例三：计算打车价格

<script>
        // 闭包应用-计算打车价格 
        // 打车起步价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;
                },
                //拥堵之后的费用
                jam: function (flag) {
                    return flag ? total + 10 : total;
                }
            }
        })();
        console.log(car.price(5));//23
        console.log(car.jam(true)); //33
        console.log(car.price(1));//13
        console.log(car.jam(false)); //13
    </script>

思考题

思考题一：是否用到了闭包，输出结果是？

var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function() {
                return function() {
                    return this.name;
                };
            }
        };

        console.log(object.getNameFunc()())

这个代码可以这样理解：

var f = object.getNameFunc();
        var f = function() {
            return this.name;
        }
        f();
 这个就像 function({this})() 一个立即执行函数，里面的this指向的是window
 相当于：window.name
 所以输出结果是The Window
 没有涉及到布局变量的使用 所以也就不存在闭包

思考题二：是否用到了闭包，输出结果是？

        var name = "The Window";　　
        var object = {　　　　
            name: "My Object",
            getNameFunc: function() {
                var that = this;
                return function() {
                    return that.name;
                };
            }
        };
        console.log(object.getNameFunc()())

这个类似于上一个思考题，但是这里有that变量
var f = object.getNameFunc();
        var f = function() {
            return that.name;
        }
        f();
        在getNameFunc里面this指向的是函数的调用者 object
        所以that指向的也是object
        所以输出结果为 object.name -->My Object
    这个里面return后面的函数访问了getNameFunc中的that变量，所以存在闭包