Js面试之作用域与闭包

最近在整理一些前端面试中经常被问到的问题，分为vue相关、react相关、js相关、react相关等等专题，可持续关注后续内容，会不断进行整理~

作用域

作用域（scope）定义了程序中变量的可访问性和生命周期，在js中，作用域有两种主要的类型：词法作用域（Lexical Scope）和动态作用域（Dynamic Scope）；

词法作用域

词法作用域又称静态作用域，是指作用域在代码编写阶段就确定的，与函数的定义位置有关。javascript使用词法作用域，函数的作用域在函数定义时就已经确定

var globalVariable = 'I am global'function outer() {var outerVariabl = 'I am outer'function inner() {var innerVariable = 'I am inner'console.log(innerVariable) // 可以访问innerVariableconsole.log(outerVariable) // 可以访问outerVariableconsole.log(globalVariable) // 可以访问globalVariable}inner();console.log(innerVariable) // Error: innerVariable is not defined
}outer()

动态作用域

动态作用域是在运行时根据调用链来确定的，与函数的调用位置有关。js不使用动态作用域，而是使用词法作用域

闭包

闭包(Closure)是指一个函数和其词法作用域的组合。当函数在词法作用域以外的地方被调用时，它仍然能够访问自己的词法作用域，形成了闭包。
或说

闭包（Closure）是指有权访问另一个函数作用域中变量的函数，即便是在外部函数执行完毕之后。

function outer() {var outerVariable = 'I am outer'function inner() {console.log(outerVariable) // 形成闭包，可以访问outerVariable}return inner
}var closureFunction = outer()
closureFunction() // 通过闭包访问outerVariable

闭包使用场景

封装私有变量

通过闭包，可以创建私有变量，只能通过闭包内部的函数访问，不会被外部直接访问到；

function counter() {var count = 0;return function() {count++;console.log(count);};
}var increment = counter();
increment(); // 输出 1
increment(); // 输出 2

模块化开发

使用闭包可以创建模块，将相关的功能封装到一个闭包中，避免全局污染

var module = (function() {var privateVariable = 'I am private';function privateFunction() {console.log('This is private')}return {publicVariable: 'I am public',publicFunction: function() {console.log('This is public')}}
})()console.log(module.publicVariable) // I am public
module.publicFunction() // This is public

保持变量状态

由于闭包可以访问外部函数的变量，所以可以保持状态

function createCounter() {var count = 0;return {increment: function() {count++;console.log(count)},reset: function() {count = 0;console.log('Count reset')}}
}var counter = createCounter();
counter.increment(); // 输出1
counter.increment(); // 输出2

异步操作

在异步回调中经常使用闭包来保存状态

function fetchData(url, callback) {var data = null;fetchDataFromServer(url, function(result)) {// 调用 fetchDataFromServer 函数从服务器异步获取数据，并传给datadata = result;callback();});return function() {// 使用闭包中的dataconsole.log(data);}
}var getData = fetchData('https://example.com/data', function() {console.log('Data received');
})// 在合适的时机调用getData()

注意事项

• 潜在的内存泄漏问题：如果闭包中引用了大量变量，可能导致内存无法释放。
• 滥用闭包可能导致性能问题，因为它们会占用更多内存