JavaScript闭包原理与使用介绍

目录

• 1. 认识闭包
• 2. 变量的作用域和生命周期
• 2.1 变量的作用域
• 2.2 变量的生命周期
• 3. 闭包的概念及其作用
• 3.1 闭包的概念
• 3.2 闭包的应用
• 3.2.1 保存私有变量
• 3.2.2 使用闭包实现节流

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)

到此这篇关于JavaScript闭包原理与使用介绍的文章就介绍到这了,更多相关JS闭包内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！