-
闭包的概念
简单的理解,一个作用域可以访问另外一个函数内部的局部变量 -
闭包小案例,访问了函数内部变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 一个作用域可以访问另外一个函数内部的局部变量
function fn(){
var num = 10;
return function fun(){console.log(num)}
}
var f = fn();
// console.log(f);
f(); // f 就是 function fun(){console.log(num)} 相当于访问了fn()内部变量
// 闭包的作用:延申了作用域的范围
</script>
</body>
</html>
3.闭包案例-打印li的索引号–示例
- 打印li的索引号–源代码
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 利用 闭包 点击li打印 每个li的索引号 -->
<ul>
<li>互联网</li>
<li>娱乐</li>
<li>电影</li>
<li>美食</li>
</ul>
<script>
var lis = document.querySelector('ul').querySelectorAll('li');
for ( var i = 0 ; i < lis.length ; i++){
(function(i){
lis[i].addEventListener('click',function(){
console.log(i);
})
})(i)
}
</script>
</body>
</html>
5.闭包–打印li内容
- 打印li内容–源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 利用 闭包 3秒钟之后打印li的内容 -->
<ul>
<li>互联网</li>
<li>娱乐</li>
<li>电影</li>
<li>美食</li>
</ul>
<script>
var lis = document.querySelector('ul').querySelectorAll('li');
for(var i = 0 ; i <lis.length ; i++){
(function(i){ // 这里的i 是形参
setTimeout(function(){
console.log(lis[i].innerHTML); // lis[i].innerHTML 是li的内容
},3000) // 3000毫秒 -->3秒
})(i) // 立即执行函数的i 是实参
}
</script>
</body>
</html>
- 应用案例–打车计费–源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/* 起步价,小于等于3公里,收7块钱,超3公里后,每公里5块钱;
堵车的话另收10块钱 */
// 立即执行函数:
var F = (function () {
var sum_money = 0; // 总费用
var start_price = 7; // 起步价
return {
// 不堵车:
price: function (n) {
if (n <= 3) {
sum_money = start_price;
} else {
// 超3公里的费用 sum_money
sum_money = (n - 3) * 5 + start_price;
}
return sum_money;
},
// 堵车:
duche: function (flag) {
if (flag) {
sum_money = sum_money + 10;
} else {
sum_money = sum_money;
} return sum_money;
}
}
})()
console.log('车费是:' + F.price(3)); // 7
console.log('车费是:' + F.price(5)); // 17
console.log('车费是:' + F.duche(true)); // 27
</script>
</body>
</html>
- 喜欢的记得点赞,收藏