js高阶函数和闭包

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>高阶和闭包</title>
	</head>
	<body>
		<ul>
			<li>内容1</li>
			<li>内容2</li>
			<li>内容3</li>
			<li>内容4</li>
		</ul>
		<script>
			// 1-高阶函数是对其它函数进行操作的函数
			//01 高阶函数：把函数作为参数
			function fn(callback) {
				callback && callback();
			}
			fn(function() {
				console.log("高阶函数！");
			})
			//02 高阶函数：返回一个函数
			function fn1() {
				return function() {
					console.log("高阶函数的返回");
				}
			}
			let fn2 = fn1();
			fn2();

			// 2-闭包Closure有权访问另一个作用域中变量的函数。 --javaScript高级程序设计
			// 简单理解  一个作用域可以访问另外一个函数内部的局部变量
			function fn4() {
				let num = 10;
				return function() {
					console.log("闭包拿到的值");
					num++;
					console.log(num);
				}
			}
			let f = fn4();
			f();
			// 闭包存储了num没有释放
			f();
			// 3-闭包的运用
			// 点击li得到索引不用再添加index属性
			let lis = document.querySelectorAll("ul li");
		 // 闭包形式
			for (var i = 0; i < lis.length; i++) {
			 (function(i) {
					lis[i].onclick = function() {
						console.log(i)
					}
			 })(i)

			}
			// 闭包应用02 2s之后打印li的内容 异步任务不会立即执行，放到任务队列里面，即使是0也要等待
			for (var i = 0; i < lis.length; i++) {
				(function(i) {
					setTimeout(function() {
						console.log(lis[i].innerHTML);
					}, 2000)
				})(i)
			}
			
			//闭包应用03 计算打车价格  起步价13（3公里内） 之后一公里5元 用户输入公里数 拥堵多收10元
			var car=(function(distance){
		    let start=13;//起步价  局部变量
			let total; //总价 局部变量
			return {
				normal:function(distance){
					if(distance<=3){
						total=start;
					}else{
						total=start+5*(distance-3);
					}
					return total;
				},
				yd:function(flag){
					return flag?total+10:total;
				}
			}
			})()
			console.log("车费：");
			console.log(car.normal(5));
			console.log(car.yd(false));
			console.log(car.yd(true));
			
			// 思考题
			let name="the window";
			let obj1={
				name:'myObj1',
				getNameTest:function(){
					return function(){
						return this.name;
					}
				}
			}
			console.log(obj1.getNameTest()());
			
			let obj2={
				name:'myObj2',
				getNameTest:function(){
					let that=this;
					return function(){
						return that.name;
					}
				}
			}	
			console.log(obj2.getNameTest()());
		</script>
	</body>
</html>
js高阶函数和闭包

猜你喜欢
