营销网站设计上海天气,北京南站地铁几号线,装饰工程公司排名,建筑设计公司职位有哪些Js面试之作用域与闭包 作用域词法作用域动态作用域 闭包闭包使用场景封装私有变量模块化开发保持变量状态异步操作 注意事项 最近在整理一些前端面试中经常被问到的问题#xff0c;分为vue相关、react相关、js相关、react相关等等专题#xff0c;可持续关注后续内容#xff… Js面试之作用域与闭包 作用域词法作用域动态作用域 闭包闭包使用场景封装私有变量模块化开发保持变量状态异步操作 注意事项 最近在整理一些前端面试中经常被问到的问题分为vue相关、react相关、js相关、react相关等等专题可持续关注后续内容会不断进行整理~ 作用域
作用域scope定义了程序中变量的可访问性和生命周期在js中作用域有两种主要的类型词法作用域Lexical Scope和动态作用域Dynamic Scope
词法作用域
词法作用域又称静态作用域是指作用域在代码编写阶段就确定的与函数的定义位置有关。javascript使用词法作用域函数的作用域在函数定义时就已经确定
var globalVariable I am globalfunction outer() {var outerVariabl I am outerfunction inner() {var innerVariable I am innerconsole.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 outerfunction 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()注意事项
潜在的内存泄漏问题如果闭包中引用了大量变量可能导致内存无法释放。滥用闭包可能导致性能问题因为它们会占用更多内存
