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闭包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更快，本文总结了一下几个注意点，分享给大家2015-05-05
本文主要介绍了JS批量替换内容中关键词为超链接，避开已存在的链接和alt、title中的关键词的方法。下面跟着小编一起来看下吧2017-02-02
在 Web 开发中,导入和导出 Excel 文件是一个常见的需求,特别是对于数据报表和分析等场景,虽然有很多第三方库（如 xlsx 和 sheetjs）提供了非常强大的功能,但本文将探讨如何不依赖第三方库,利用纯 JavaScript 来实现读取和导出Excel文件,需要的朋友可以参考下2025-03-03
这篇文章主要给大家介绍了关于echarts中tooltip添加点击事件的相关资料,echarts tooltip点击事件是指当用户点击图表中的提示框(tooltip)时触发的事件,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了如何在CocosCreator中利用常驻节点做图层管理，这些技巧非常实用，希望同学们看完，回去可以试一下2021-04-04
效率较低 该如何优化了2010-08-08
今天小编就为大家分享一篇关于JavaScript常用事件介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
本篇文章实例演示了Javascript的面向对象--接口的用法。希望对大家有所帮助，下面就随小编一起来看看吧2016-12-12
这篇文章主要介绍了通过js实现压缩图片上传功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
除了对象之外，数组Array类型可能是javascript中最常用的类型了。而且，javascript中的数组与其他多数语言中的数组有着相当大的区别。本文将介绍javascript中的数组Array类型，非常不错，感兴趣的朋友一起看下吧2016-07-07
最新评论