什么是闭包?
闭包(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