目录1. 认识闭包2. 变量的作用域和生命周期2.1 变量的作用域2.2 变量的生命周期3. 闭包的概念及其作用3.1 闭包的概念3.2 闭包的应用3.2.1 保存私有变量3.2.2
闭包有一个很经典的场景:使用 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
上面的代码中for循环中的变量i是使用var声明的,会提升至全局,最终打印输出的都是全局的i，而在点击按钮之前for循环已经走完,因此输出的都是5。
在使用闭包改进的时候使用立即执行函数将每次循环的i保留在立即执行函数的内部,最终输出的就是正确的结果。
全局作用域的变量的生命周期是永久的,函数内的变量在函数执行后被回收销毁。
产生闭包的时候由于函数的返回值(函数)仍然引用着函数的局部变量,导致即使函数执行完函数内的变量仍然存在。闭包正是利用这一特性。
经过上面的讲述不难发现闭包主要涉及变量的生命周期和作用域。形成闭包的三个必要条件:
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 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闭包内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: JavaScript闭包原理与使用介绍
本文链接: https://www.lsjlt.com/news/169559.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0