闭包定义:当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。
变量背包:代码层面理解一般就是一个函数A,return其内部的函数B,被return出去的B函数能够在外部访问A函数内部的变量,这时候就形成了一个B函数的变量背包,A函数执行结束后这个变量背包也不会被销毁,并且这个变量背包在A函数外部只能通过B函数访问。
function A() {
let a = 'bug';
return function B() {
console.log(a);
}
}
let h = A();
// 获取到了函数A内部的变量
h();//'bug'
闭包形成的原理:作用域链,当前作用域可以访问上级作用域中的变量。
闭包解决的问题:能够让函数作用域中的变量在函数执行结束之后不被销毁,同时也能在函数外部访问函数内部的变量;可以避免全局变量的污染;加强封装行,是实现了对变量的隐藏和封装,让js也能支持私有变量;
闭包带来的问题:由于垃圾回收机制不会将闭包中的变量销毁,于是就造成了内存泄露,内存泄漏积累多了就容易导致内存溢出;闭包导致内存消耗过大,增加了内存消耗量,影响网页性能出现问题;
闭包的应用:
函数防抖:
// 函数防抖:一定时间之内连续多次触发事件,方法只在最后一次触发事件的时候执行
let fn = function () {
console.log('lalalla');
}
window.onresize = resize(fn);
function resize(fn) {
let time = null;
return function() {
if (time) {
clearTimeout(time)
time = null
}
time = setTimeout(function() {
fn()
},500)
}
}
函数科里化:
function add() {
return [...arguments].reduce((a,b) => a+b)
}
function curry1(fn) {
// 用于存储输入的参数
let arg = [];
return function _c() {
// 将原来的参数和这次_c的参数进行合并
arg = [...arg,...arguments]
// 如果存在参数则存入arg中 没有则执行fn
// 所以后面执行时后面必须跟一个(),代表结束传参
if (arguments.length) {
// 后面还有参数,因此要返回函数_c
return _c
}else{
//说明参数都在arg里面了就可以执行add函数了
//其实也可以fn(...arg)或者fn.apply(null,arg)
//下面的写法更加优雅,注意要把这个函数执行的结果返回出来,不让拿不到结果
return fn.apply(this,arg)
}
}
}
let a = curry1(add)
a(1,2)(2)(3)
a(4)(5)
console.log(a());//17
模仿块级作用域:
// var 不是块级作用域 只存在一个变量i 所以会输出10个10
for(var i = 0;i < 10;i++) {
setTimeout(function () {
console.log(i);
},10)
}
// let 块级作用域 输出0-9
for(let i = 0;i < 10;i++) {
setTimeout(function () {
console.log(i);
},10)
}
// 闭包模仿块级作用域 输出0-9
for (var i = 0; i < 10; i++) {
(
function (i) {
setTimeout(function () {
console.log(i);
}, 10)
}
)(i)
}