Aplicación de cierres
Qué es un cierre : el cierre se refiere a una función que tiene acceso a variables en el alcance de otra función, y un alcance puede acceder a las variables locales de otra función
El papel del cierre : ampliar el alcance de la variable
1. Obtenga el número de índice actual de li mediante el cierre
Ideas:
- Definir una lista de li en la página
- Obtener la colección de li, atravesar, vincular el evento de clic para cada li, imprimir el índice del li actual
- En el bucle, cree una función de ejecución inmediata, la función de ejecución inmediata se envuelve con el evento de clic y el parámetro de la función autoejecutable es la variable de bucle for
Bloque de código:
<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>
Resultados del:
2. Solicitud de cierre: imprima el contenido de li después de tres segundos
Ideas:
- Definir una lista de li en la página
- Obtener la colección de li, atravesar, imprimir el contenido actual de li
- En el ciclo, cree una función de ejecución inmediata, la función de ejecución inmediata es una función envuelta con un retraso, y el parámetro de función autoejecutable es una variable del ciclo for
Bloque de código:
<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>
Resultados del:
3. Solicitud de cierre: cálculo del precio del taxi
Ideas:
- Definir una función autoejecutable, definir dos variables locales (precio inicial y precio total) dentro de la función autoejecutable
- La función autoejecutable devuelve un objeto y se definen dos métodos dentro del objeto (precio total normal, precio total congestionado)
- Las dos funciones del objeto devuelven el precio total
- Almacene la función autoejecutable en una variable y llámela
Bloque de código:
<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>
Resultados del:
Resumen de cierre
1. Qué es un cierre:
闭包是一个函数（一个作用域可以访问另一个函数的变量）
2. ¿Cuál es el papel de los cierres?
延伸变量的作用范围