什么是闭包
①要理解闭包,首先理解javascript特殊的变量作用域,变量的作用于无非就是两种:全局变量,局部变量。
②javascript语言的特殊处就是函数内部可以读取外部作用域中的变量。
③我们有时候需要得到函数内的局部变量,但是在正常情况下,这是不能读取到的,这时候就需要用到闭包。在javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包是指有权访问另一个函数作用域中的变量的函数。其本质是函数的作用域链中保存着外部函数变量对象的引用。
闭包的特点
优点:
- 让外部访问函数内部变量成为可能
- 局部变量会常驻在内存中
- 可以避免使用全局变量,防止全局变量污染
缺点:
由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
闭包的应用场景
①函数作为参数被传递
②函数作为返回值被返回
③实际应用(隐藏数据):为什么说隐藏数据了呢,因为普通用户只能通过get、set等api对数据进行查看和更改等操作,没法对data直接更改,达到所谓隐藏数据的效果;jquery就利用了这一特性,必须调用$.ajax()才能访问内部属性方法。
封装功能时(需要使用私有的属性和方法),
函数防抖、函数节流
单例模式
- 函数节流防抖
本质上是优化高频率执行代码的一种手段
防抖:n 秒后在执⾏该事件,若在 n 秒内被重复触发,则重新计时
节流: n 秒内只运⾏⼀次,若在 n 秒内重复触发,只有⼀次⽣效
相同点:
都可以通过使⽤ setTimeout 实现
⽬的都是,降低回调执⾏频率。节省计算资源
不同点:
函数防抖
在⼀段连续操作结束后,处理回调,利⽤ clearTimeout 和 setTimeout 实现
函数防抖关注⼀定时间连续触发的事件,只在最后执⾏⼀次
函数节流:
在⼀段连续操作中,每⼀段时间只执⾏⼀次,频率较⾼的事件中使⽤来提⾼性能:
函数防抖应用场景:
搜索框搜索输⼊(如百度搜索)、⼿机号、邮箱验证输⼊检测、浏览器窗口大小调整触发的事件
函数节流应用场景:
滚动加载,加载更多或滚到底部监听
搜索框,搜索联想功能
//防抖
function debounce(fn, t) {
let timer
let delay = t || 500
return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
timer = null
fn.apply(this, args)
}, delay)
}
}
//节流
function throttle(fn, t) {
let flag = true
let interval = t || 500
return function (...args) {
if (flag) {
fn.apply(this, args)
flag = false
setTimeout(() => {
flag = true
}, interval)
}
}
}
2. 闭包作用回调函数
<body>
<a href="#" id="as1">20</a>
<a href="#" id="as2">40</a>
</body>
<script>
function changeSize(size){
return function(){
document.body.style.fontSize=size+'px';
}
}
var size20=changeSize(20);
var size40=changeSize(40);
document.getElementById('as1').onclick=size20;
document.getElementById('as2').onclick=size40;
</script>
3. 封装对象的私有属性和方法
/ 闭包隐藏数据,只提供 API
function createCache() {
const num=100
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', 100) //set此时作为c的私有方法
console.log( c.get('a') )