闭包的应用
什么是闭包：闭包（closure）指有权访问另一个函数作用域中变量的函数，一个作用域可以访问另外一个函数的局部变量
闭包的作用：延长变量的作用范围
1. 利用闭包的方式得到当前li的索引号
思路：
- 页面中定义一个li列表
- 获取li的集合，进行遍历，为每个li绑定点击事件，打印当前li的索引
- 在循环内，创建立即执行函数，立即执行函数内部是包裹着点击事件的，自执行函数的参数是for循环变量
代码块：
<body>
<ul class="nav">
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>大猪蹄子</li>
</ul>
<script>
//闭包应用-点击li输出当前li的索引号
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
//利用for循环创建了四个立即执行函数
//立即执行函数称为小闭包,因为立即执行函数里的任意一个函数都可以使用i这个变量
(function (i) {
// console.log(i);
lis[i].onclick = function () {
console.log(i);
}
})(i);
}
</script>
</body>
执行结果：
2. 闭包应用-三秒钟后打印li的内容
思路：
- 页面中定义一个li列表
- 获取li的集合，进行遍历，打印当前li内容
- 在循环内，创建立即执行函数，立即执行函数内部是包裹着延时器的函数，自执行函数参数是for循环的变量
代码块：
<body>
<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>
</body>
执行结果：
3. 闭包应用-计算打车价格
思路：
- 定义一个自执行函数，自执行函数内部定义两个局部变量（起步价和总价）
- 自执行函数返回一个对象，对象内部定义两个方法（正常的总价，拥堵的总价）
- 对象中的两个函数返回总价
- 将自执行函数存储到变量中，调用即可
代码块：
<body>
<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;
},
//拥堵后的费用
yd: function (flag) {
return flag ? total + 10 : total;
}
}
})();
console.log(car.price(1)); //13
console.log(car.yd(false)); //13
console.log(car.price(5)); //23
console.log(car.yd(true)); //33
</script>
</body>
执行结果：
闭包总结
1. 什么是闭包：
闭包是一个函数（一个作用域可以访问另一个函数的变量）
2. 闭包的作用是什么：
延伸变量的作用范围