定义:
一个函数能够访问其它函数内部定义的变量
形成的原理:
(1)函数创建:在一个函数(外部函数)中定义另一个函数(内部函数)。
(2)内部函数访问:内部函数可以访问和修改外部函数中的局部变量。
(3)函数执行:外部函数执行并返回内部函数时,外部函数的作用域(包括其中的变量)不会被销毁,因为内部函数依然持有对这些变量的引用。
使用场景:
(1)回调函数
闭包可以用作回调函数,在异步操作完成后执行。
function fetchData(callback) {setTimeout(() => {let data = 'Some data';callback(data);}, 1000);
}fetchData((result) => {console.log(result); // 输出: Some data
});
(2)定时器传参
闭包可以在定时器中使用,以传递和维护参数。
function startTimer(seconds) {setTimeout(() => {console.log(`Time's up! ${seconds} seconds elapsed.`);}, seconds * 1000);}startTimer(5); // 输出: Time's up! 5 seconds elapsed.
(3)防抖和节流
防抖和节流函数使用闭包来缓存状态和实现优化。
防抖:在事件停止触发后才执行函数。
function debounce(func, delay) {let timer;return function(...args) {clearTimeout(timer);timer = setTimeout(() => func.apply(this, args), delay);};
}const handleResize = debounce(() => {console.log('Resize event handled!');
}, 300);window.addEventListener('resize', handleResize);
节流:限制函数的执行频率。
function throttle(func, limit) {let lastFunc;let lastRan;return function(...args) {if (!lastRan) {func.apply(this, args);lastRan = Date.now();} else {clearTimeout(lastFunc);lastFunc = setTimeout(() => {if (Date.now() - lastRan >= limit) {func.apply(this, args);lastRan = Date.now();}}, limit - (Date.now() - lastRan));}};
}const handleScroll = throttle(() => {console.log('Scroll event handled!');
}, 1000);window.addEventListener('scroll', handleScroll);
(4)封装私有变量和函数
使用闭包来创建私有变量和函数。
function createCounter() {let count = 0;return {increment: function() {count++;console.log(count);},decrement: function() {count--;console.log(count);}};
}const counter = createCounter();
counter.increment(); // 输出: 1
counter.increment(); // 输出: 2
(5)缓存
闭包可以用于实现简单的缓存机制。
function createCache() {let cache = {};return function(key, value) {if (value !== undefined) {cache[key] = value;}return cache[key];};
}const cache = createCache();
cache('name', 'John');
console.log(cache('name')); // 输出: John
(6)高阶函数
高阶函数是接受函数作为参数或返回函数的函数
function makeMultiplier(multiplier) {return function(value) {return value * multiplier;};
}const double = makeMultiplier(2);
console.log(double(5)); // 输出: 10
补充一个问题:闭包一定会造成内存泄露吗?
不一定,只有内部的函数保留到外部,在外部执行时才会造成内存泄露
以上是个人的一些理解,如有不足欢迎评论区留言,下期见~