JS闭包

时间:2022-10-20 爱思考的猪人气:0

1. 认识闭包

闭包有一个很经典的场景:使用 for循环给上面5个按钮绑定点击事件。

    <button type="button" class='button'>按钮</button>
    <button type="button" class='button'>按钮</button>
	<button type="button" class='button'>按钮</button>
	<button type="button" class='button'>按钮</button>
	<button type="button" class='button'>按钮</button>
    var buttons = document.getElementsByClassName('button');
			for (var i = 0; i < 5; i++) {
				buttons[i].onclick = function() {
					console.log(i+1);
				}
			}

分别点击5个按钮控制台输出的都是5,由于i的作用域使的问题使得代码没有按照预期进行输出。

使用闭包对代码进行改进

var buttons = document.getElementsByClassName('button');
			for (var i = 0; i < 5; i++) {
				buttons[i].onclick = (function(i){
					return function(){
						console.log(i+1);
					}
				}(i))
			}

再分别点击5个按钮控制台依次输出1、2、3、4、5

2. 变量的作用域和生命周期

2.1 变量的作用域

作用域即是变量的作用范围
使用var关键字声明的变量会提升到全局,函数里面的变量只有在函数内部能够访问
使用let和和const关键字声明的变量不提升

上面的代码中for循环中的变量i是使用var声明的,会提升至全局,最终打印输出的都是全局的i，而在点击按钮之前for循环已经走完,因此输出的都是5。

在使用闭包改进的时候使用立即执行函数将每次循环的i保留在立即执行函数的内部,最终输出的就是正确的结果。

2.2 变量的生命周期

全局作用域的变量的生命周期是永久的,函数内的变量在函数执行后被回收销毁。

产生闭包的时候由于函数的返回值(函数)仍然引用着函数的局部变量,导致即使函数执行完函数内的变量仍然存在。闭包正是利用这一特性。

3. 闭包的概念及其作用

3.1 闭包的概念

经过上面的讲述不难发现闭包主要涉及变量的生命周期和作用域。形成闭包的三个必要条件:

函数返回值是个函数
被返回的函数内引用了函数的局部变量
被返回的函数在外部被调用

3.2 闭包的应用

3.2.1 保存私有变量

Javascript中没有private关键字,但可以通过闭包将变量保存在函数内部,从而达到保护变量的作用。

	var getUserInfo = (function() {
		var userInfo = {
			name: 'ian',
			age: 21
		};
		return function() {
			return userInfo;
		}
	}());
	console.log(getUserInfo()); //{name:'ian',age:21}
	console.log(userInfo); //Uncaught ReferenceError: userInfo is not defined

3.2.2 使用闭包实现节流

	function throttle(fn,delay){
			var timer=null;
		  return function(){
			  if(!timer){
				  timer=setTimeout(()=>{
				  	fn();
					timer =null;
				  },delay)
			  }
		  }
		}
		window.onresize= throttle(function(){
			console.log('resize')
		},500)

加载全部内容