JavaScript闭包-面试题

什么是闭包？
闭包（closure）指有权访问另一个函数作用域中变量的函数 ----JavaScript高级程序设计
简单来说，闭包就是一个函数（一个作用域可以访问另一个函数的局部变量）
闭包的作用是什么？
延伸变量的作用范围

function fn() {
    var num = 10;
    return function() {
        console.log(num);	//这里的num就是访问了fn()函数的局部变量num，所以fn()是一个闭包函数
    }
}
var f = fn();
f();	//10

闭包的经典面试题1–点击li输出当前li的索引号

//HTML 部分代码
<nav>
    <li>大猪蹄子1</li>
    <li>大猪蹄子2</li>
    <li>大猪蹄子3</li>
    <li>大猪蹄子4</li>
</nav>

// JS部分代码
// 1. 我们可以利用动态添加属性的方式
var lis = document.querySelector('nav').querySelectorAll('li');
// 2. 利用闭包的方式得到当前li的索引号
for(var i = 0; i < lis.length; i++) {
    // 利用for循环创建了4个立即执行函数
    // 立即执行函数特成为小闭包，因为立即执行函数里面的任意一个函数都可以使用它的i这个变量
    (function (i) {
        lis[i].onclick = function () {
            console.log(i);              
        };
    })(i);
}

闭包的经典面试题2–3秒之后，打印所有li元素的内容

//HTML 部分代码
<nav>
    <li>大猪蹄子1</li>
    <li>大猪蹄子2</li>
    <li>大猪蹄子3</li>
    <li>大猪蹄子4</li>
</nav>

// JS部分代码
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);
}

闭包的经典面试题3–打车起步价13（3公里内），之后每多公里增加5块钱 用户输入公里数就可以计算打车价格

// JS部分代码
var cal = (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(cal.price(5));  //23
console.log(cal.yd(true));  //33

console.log(cal.price(1));  //13
console.log(cal.yd(false));  //13