JavaScript闭包概念

闭包

闭包的形成

1. 外部函数内部嵌套内部函数
2. 内部函数中使用外部函数的环境
3. 外部函数返回内部函数

// 1、外部函数内部嵌套内部函数 
		function fn1() {
			var a = "Hello!";
			function fn2() {
				// 2、内部函数中使用外部函数的环境
				console.log(a);
			}
			// 3、外部函数返回内部函数
			return fn2;
		}
		
		var f = fn1();
		console.log(f);//闭包中的函数
		f();//"Hello!"
		
		
		function test() {
			var num = 1;
			num++;
			console.log(num);
		}
		
		test();//2
		test();//2
		test();//2

console.log("====================");
		
		
		// 1、外部函数内部嵌套内部函数 
		function outFn() {
			var num = 1;
			function inFn(){
				// 2、内部函数中使用外部函数的环境
				num++;
				console.log(num);
			}
			// 3、外部函数返回内部函数
			return inFn;
		}
		var inF = outFn();
		inF();//2
		inF();//3
		inF();//4
		inF();//5
		
		var inF1 = outFn();
		inF();//6

闭包的作用

1. 获取函数内部的变量
2. 保持变量的值在内存中
3. 避免变量名重复

		// 定义外部函数，设置形参（水壶的容量）
		function waterFlower(total) {
			// 定义内部函数，执行浇水过程 （每次浇水，水容量减50ml）
			function water(flower) {
				// 当水容量大于50ml则浇水
				if (total >= 50) {
					// 每次浇水减50
					total = total - 50;
					
				} else {
					// 如果没水，则自动加水
					document.write("<h4>正在重新装水....</h4>");
					total = 200;
					// 浇水
					total = total - 50;
					// 
				}
				document.write("给"+flower+"浇水50ml，剩余" + total + "ml的水！<br>");
			}
			
			// 返回内部函数
			return water;
		}
		
		// 装水
		var t = waterFlower(200);
		// 浇水
		t("桃花"); //给桃花浇水50ml,剩余150ml的水!
		t("兰花");//给兰花浇水50ml,剩余100ml的水!
		t("玫瑰花");//给玫瑰花花浇水50ml,剩余50ml的水!
		t("菊花");//给菊花花浇水50ml,剩余0ml的水!
		t("桂花");//正在重新装水
				// //给桂花浇水50ml,剩余150ml的水!