JavaScript闭包详解及案例

一. 变量作用域

函数内部可以使用全局变量
函数外部不可以使用局部变量
当函数执行完毕时，本作用域内的局部变量会被销毁

二. 闭包

闭包:有权访问另一个函数作用域中变量的函数(变量所在的函数就是闭包函数，闭包就是典型的高阶函数)
闭包的作用：延申了变量的作用范围

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

//方法二
function fn() {
            var num = 10;
            function fn1() {
                console.log(num);
            }
            return fn1();
}
fn();  //10

三. 案例

案例1：点击每一道菜会打印出相应索引号

<body>
    <ul class="nav">
        <li>红烧茄子</li>
        <li>凉拌海带丝</li>
        <li>泡椒风爪</li>
        <li>韩式烤肉</li>
    </ul>
    <script>
        //点击每一道菜会打印出索引号
        //方法1.利用动态添加属性的方法(传统方法)
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function() {
                alert(this.index);
            }
        }
        //方法2.利用闭包的方法
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                lis[i].onclick = function() {
                    console.log(i);

                }
            })(i); //立即执行函数最后一个小括号用来传递参数，第一个小括号用来接收参数
        }
    </script>
</body>

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

<body>
    <ul class="nav">
        <li>红烧茄子</li>
        <li>凉拌海带丝</li>
        <li>泡椒风爪</li>
        <li>韩式烤肉</li>
    </ul>
    <script>
        //3秒钟之后打印所有li元素的内容
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);

                }, 3000)

            })(i);
        }
    </script>
</body>

案例3：计算打车价格(在3公里内打车起步价13，之后多一公里多5元，用户输入公里数就可以计算打车价格，若出现拥堵情况，总价格多收10元)

var car = (function() {
        var start = 13;
        var total = 0;
        return {
                price: function(n) {
                    if (n <= 3) {
                        total = start;
                    } else {
                        total = (n - 3) * 5 + start;
                    }
                    return total;
                },
                jam: function(n) {
                    if (n = 0) {
                        return total = total;
                    } else {
                        return total = total + 10;
                    }
                }
      };
})();
car.price(5);
var money = car.jam(1);
console.log(money);

四. 思考

下列代码的返回值

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

下列代码的返回值

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

你做对了吗？

JavaScript闭包详解及案例

JavaScript闭包详解及案例

猜你喜欢