js闭包，什么情况下用闭包

2022-08-09 网页编程网 网页编程网

<body>
1.闭包，就是能够读取其他函数内部变量的函数<br />
定义在一个函数内部的函数，读取函数内变量。<br />
闭包是将函数内部和函数外部连接起来的桥梁<br />
2.全局变量会一直存在于整个页网中，页网关闭即销毁。项目中，要减少使用全局变量<br />
3.局部变量在函数内有效，函数执行完即销毁<br />
局部变量无法共享和长久保存，全局变量可造成污染，此时用闭包可兼顾之<br />
所以闭包的作用：就是把局部变量的状态维持下来，常用在封装中<br />
缺点：禁大量引用，不回收，太占内存
<script>
window.onload=function () {
	var a=10
	function f1(){
		var b=10
	};
	f1()
	//console.log(b)//报错访问不到

function f2(){
		var c=3
		return function(){
			console.log(c)
		};
	}
	f2()()//因为2个函数，加2个括号

var n=0
	function f3(){
		n++
		console.log(n)
	}
	f3()//1
	f3()//2
	f3()//3全局变量

function f4(){
		var n=0
		n++
		console.log(n)
	}
	f4()//1
	f4()//1局部变量

//闭包条件，返回一个函数，且函数对局部变量有引用，主形成了闭包的包含关系，可维持局部变量的状态
	function f5(){
		var j=0
		function f6(){
			j++
			console.log(j)
		}
		return f6
	}
	var f=f5()//执行的结果即为闭包
	f()//1
	f()//2
	f()//3

var x1=f5()//形成一个闭包
	var x2=f5()//形成另一个闭包
	var x3=f5()
console.log('+++')
	x1()//1
	x1()//2
	x2()//1
	x3()//1
	x3()//2
console.log('+++')

function f7(){
		var k=0
		k++
		console.log(k)
	}
	var t=f7
	t()//1非闭包
	t()//1

}//window.onload

/*
	
//综合应用实例
//第一步原始
function ajax(){
	var xmlhttp=new XMLHttpRequest()
	//return function(){

//}法1难扩展，只能用if区分
	return{
		request:()=>{
			xmlhttp.open('post','http://xxx.php/ajax.php')
			if(method=='GET'){
				xmlhttp.send()
			}else{
				ajax.setRequestHeader('content-type','application/x-www-form-urlencoded');
				xmlhttp.send(data)
			}
			xmlhttp.onreadystatechange=function(){
				if(xmlhttp.readyState==4 && xmlhttp.status==200){
					console.log(xmlhttp.responseText)
					success(xmlhttp.responseText)
				}else{
					error()
				}
			}

}，
		set:()=>{

},
		remove:()=>{

}
	}//灵活，易扩展
}//ajax

//第二步，提取变量
function ajax(){
	var xmlhttp=new XMLHttpRequest()
	//return function(){

//}法1难扩展，只能用if区分
	return{
		request:(method,url,data,success,error)=>{
			xmlhttp.open(method,url)
			if(method=='GET'){
				xmlhttp.send()
			}else{
				ajax.setRequestHeader('content-type','application/x-www-form-urlencoded');
				xmlhttp.send(data)
			}
			xmlhttp.onreadystatechange=function(){
				if(xmlhttp.readyState==4 && xmlhttp.status==200){
					console.log(xmlhttp.responseText)
					success(xmlhttp.responseText)
				}else{
					error()
				}
			}

}，
		set:()=>{

},
		remove:()=>{

}
	}//灵活，易扩展
}//ajax

//第三，统一应用方案
var ajax=ajax()
let _url='http://10.12.1.9:8080/josn'
function sendData(moblie,password){
	var data=JSON.stringify({
		moblie:moblie,
		password:password
	});
	ajax.request('post',_url,function(){
		console.log(res)
	},function(){

})
}
*/
</script>
</body>

阅读原文

阅读 2407

123 显示电脑版