闭包案例
·
Yin灏
案例1:循环注册点击事件
/*
var lis = document.querySelector('.nav').querySelectorAll('li')
for(var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
console.log(i)
}
}
lis[i].onclick 是异步任务,点击了之后才会去执行,但是 for 循环是同步任务,会立即执行。所以 i 永远会是 4。
*/
// 利用闭包的方式得到当前 li 的索引
var lis = document.querySelector('.nav').querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
// 利用 for 循环创建了 4 个立即执行函数
(function(j) {
lis[j].onclick = function() {
console.log(j)
}
})(i);
}
案例2:循环中的 setTimeout()
var lis = document.querySelector('.nav').querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
(function(j) {
setTimeout(function() {
console.log(lis[j].innerHTML);
}, 3000)
})(i)
}
案例3:打车价格计算
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(5));
console.log(car.yd(true));