闭包以及使⽤场景详解
什么是闭包:
1. 要理解闭包,⾸先理解javascript特殊的变量作⽤域,变量的作⽤域⽆⾮就是两种:全局变量和局部变量。
2. javascript语⾔的特殊处就是函数内部可以读取外部作⽤域中的变量。
3. 我们有时候需要得到函数内的局部变量,但是在正常情况下,这是不能读取到的,这时候就需要⽤到闭包。在javascript语⾔中,只有
函数内部的⼦函数才能读取局部变量,因此可以把闭包简单理解成“定义在⼀个函数内部的函数”。闭包是指有权访问另⼀个函数作⽤域中的变量的函数。其本质是函数的作⽤域链中保存着外部函数变量对象的引⽤。
闭包使⽤场景1,封装对象的私有属性和⽅法
隐藏数据
做⼀个简单的缓存⼯具
// 闭包隐藏数据,只提供 API
function createCache(){
const num=10
const data ={}// 闭包中的数据,被隐藏,不被外界访问
return{
num:num,
set:function(key, val){
data[key]= val
},
get:function(key){
return data[key]
}
}
}
const c =createCache()
console.log(c.num)//num此时就作为c私有属性
c.set('a',10)//set此时作为c的私有⽅法
console.log( c.get('a'))
闭包应⽤场景2,闭包作⽤回调函数
<body>
<a href="#" id="a1">20</a>
<a href="#" id="a2">40</a>
</body>
<script>
jquery是什么有什么作用function changeSize(size){
return function(){
document.body.style.fontSize = size +'px';
}
}
var size20 =changeSize(20);
var size40 =changeSize(40);
</script>
闭包应⽤场景3,函数节流防抖
<body>
<!--函数防抖是指在函数被⾼频触发时当停⽌触发后延时n秒再执⾏函数,
(即每次触发都清理延时函数再次开始计时),⼀般⽤于resize scroll,mousemove -->
<!--函数节流原理函数被⾼频出发时延时n秒后才会再次执⾏,防抖主要是⽤户触发⼀次时间后,延迟⼀段时间触发,
⽽节流会规定的事件内触发⼀次事件-->
</body>
<script>
// 函数节流:是确保函数特定的时间内⾄多执⾏⼀次。
// 函数防抖:是函数在特定的时间内不被再调⽤后执⾏。
//防抖
var debounce=function(func, delay){
var timer =null
return function(){
var that =this;
var args = arguments;
if(timer){
clearTimeout(timer);
}
timer =setTimeout(function(){
func.apply(that, args);
}, delay)
}
}
ipt.addEventListener('keyup',debounce(function(e){
console.log(e.target.value);
},500))
</script>
补充
// 闭包会造成页⾯性能问题在ie中可能导致内存泄漏
function a(){
var num =10;
return function(){
return++num;
}
}
// var inc =a();
// console.log(inc());
// console.log(inc());
// inc=null;
//也可这样写 a()获取当前函数再调⽤
//因为⽣成的函数inc也是个闭包这个闭包再次访问到变量num
console.log(a()());
console.log(a()());
总结:
闭包的应⽤场景:
1. 函数作为参数被传递
2. 函数作为返回值被返回
3. 实际应⽤(隐藏数据):为什么说隐藏数据了呢,因为普通⽤户只能通过get、set等api对数据进⾏查看和更改等操作,没法对data直
接更改,达到所谓隐藏数据的效果;jquery就利⽤了这⼀特性,必须调⽤$.ajax()才能访问内部属性⽅法。
封装功能时(需要使⽤私有的属性和⽅法),
函数防抖、函数节流
单例模式
闭包的优点:
1. 变量长期驻扎在内存中
2. 另⼀个就是可以重复使⽤变量,并且不会造成变量污染
①全局变量可以重复使⽤,但是容易造成变量污染。不同的地⽅定义了相同的全局变量,这样就会产⽣混乱。
②局部变量仅在局部作⽤域内有效,不可以重复使⽤,不会造成变量污染。
③闭包结合了全局变量和局部变量的优点。可以重复使⽤变量,并且不会造成变量污染。
闭包的缺点:
由于闭包会使得函数中的变量都被保存在内存中,内存消耗很⼤,所以不能滥⽤闭包,否则会造成⽹页的性能问题,在IE中可能导致内存泄露。解决⽅法是,在退出函数之前,将不使⽤的局部变量全部删除。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论