灏天阁

闭包案例

· 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));

- Book Lists -