前端面试题-什么是JavaScript的闭包?有哪些应用场景?

定义:

一个函数能够访问其它函数内部定义的变量

形成的原理:

(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

补充一个问题:闭包一定会造成内存泄露吗?

不一定,只有内部的函数保留到外部,在外部执行时才会造成内存泄露

以上是个人的一些理解,如有不足欢迎评论区留言,下期见~