JavaScript闭包原理与使用介绍
更新时间：2022年10月18日 08:42:02 作者：爱思考的猪
闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,下面这篇文章主要给大家介绍了关于JavaScript闭包函数的相关资料,需要的朋友可以参考下
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 defined3.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闭包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
next.js初始化参数设置getServerSideProps应用学习
这篇文章主要为大家介绍了next.js初始化参数设置getServerSideProps的应用示例学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
本文主要介绍了Layui实现多条件查询，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
模态窗口的滚动位置获取办法还有不知道的吗？下面的方法或许对大家有所帮助，感兴趣的朋友可以了解下，希望对大家有所帮助2013-08-08
这篇文章主要介绍了JavaScript选择排序算法原理与实现方法,简单分析了选择排序算法的概念、原理并结合实例形式分析了JavaScript选择排序算法的相关实现技巧与操作注意事项,需要的朋友可以参考下2018-08-08
IE9+已经不对document.createElement向下兼容的解决方法
这篇文章主要介绍了IE9+已经不对document.createElement向下兼容的解决方法,需要的朋友可以参考下2015-09-09
IE事件对象（The Internet Explorer Event Object）
不同于DOM事件对象，基于Event Handler授权这种方式，IE事件对象可以用不同的方式进行访问。当一个事件Handler通过DOM 0 级的方式被授权，则这个事件对象将作为window对象的属性而存在2012-06-06
这篇文章主要介绍了javascript实现Table排序的方法,涉及javascript针对表格对象的获取与排序相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了js实现简单分页导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
javascript作为前端常用的开发语言,越来越多的人都在学习它,下面这篇文章主要给大家介绍了关于如何使用JavaScript打造一个扫雷游戏的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-02-02
一键回顶功能想必大家在浏览网页时会经常遇到吧，实现的方法也有很多，在本文为大家介绍下js是如何实现的，感兴趣的朋友可以参考下2013-10-10
最新评论