2022前端面经---(js高级)一文让你搞懂闭包

简介: 2022前端面经---(js高级)一文让你搞懂闭包

面试题


面试题:


请你说详细说明一下js中什么是闭包


问题剖析:


本题就是考察你对闭包是否有一个熟练的掌握,这个问题你必须要知道闭包的概念,以及怎么去实现闭包,同时你要懂得js中的垃圾回收机制


问题解答:


什么是js垃圾回收机制(前提)


垃圾回收机制(GC:Garbage Collection):执行环境负责管理代码执行过程中使用的内存。JS的垃圾回收机制是为了以防内存泄漏,内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着,没有被释放,导致该内存无法被使用,垃圾回收机制就是间歇的不定期的寻找到不再使用的变量,并释放掉它们所指向的内存。


概念出自于文章JavaScript垃圾回收机制


其实我们通俗的解释就是:js存在专门的机制去处理我们不用的一些东西,不论是简单数据类型还是复杂数据类型。


简单举例:var a =1,我们定义了变量a,并且给它赋值为1,随后我们去改变a的值,a = 100,现在的话我们知道a的值变成了100,那么数值1我们肯定就不会用到了,那么js的垃圾回收机制会帮助我们把数值1给回收了,为了避免内存泄漏!


闭包


闭包的概念


闭包(closure):函数内部返回一个函数,这个内部函数被外界所引用,这个内部函数就不会被js回收机制所销毁,内部函数所用到的外部函数的变量也不会被销毁。


代码示例:

function outer() {
     let name = 'james'
     let age = 37
     return function() {
         return name + ' is superstar';
     }
 }
 let func = outer()
 console.log(func()); //james is superstar


代码解析:


在上方代码中我们定义了一个外部函数outer(),在外部函数内部返回了一个函数(内部函数),随后在外界中将外部函数赋给了func,这个func就是内部函数,然后执行func(),打印出来了相应的结果,在这里,我们使用了外部函数内定义的属性name和内部函数,所以name和内部函数不会被js回收机制所处理,但是属性age我们并没有使用,所以age被js垃圾回收机制所回收!


优点和缺点


在代码解析中,我们知道了 我们所创建的临时变量name将不会被回收,所以闭包的优点就是:让临时变量可以永驻内存。


但是如果我们不停的执行func,那么就会出问题,这样的话会使内存中不断的储存临时变量,就会导致内存泄漏,所以闭包的缺点就是:会造成内存泄漏。


项目场景


在上面我们知道了什么是闭包,但是只知道闭包不知道咋用,未免有点难受,在这里说一个场景,就是防抖和节流


代码示例:


在这里写一个搜索框,搜索框的内容输入频次可以使用防抖或节流来优化。




<input type="text" id="search">
1
闭包防抖
search.oninput = (function() {
let timer = null
return ()=>{
 if(timer) {
    clearTimeout(timer)
 }
  timer = setTimeout(()=>{
     console.log('发送了ajax请求');
  },500)
}
})()


闭包节流



search.oninput = (function(){
        let flag=true
        return ()=>{
            if(flag) {
                setTimeout(()=>{
                    console.log('发送了ajax请求');
                    flag = true
                },500)
            }
            flag = false
        }
    })()


闭包的实战常见场景主要是在防抖和节流中,就是为了防止在防抖和节流中我们创建的临时变量会丢失!


个人总结


闭包是js高级中一个重要的知识点,闭包的存在就是为了进行一些项目的优化,可能在日常开发中小伙伴们使用不到,但是一旦开发项目对所有的细节把控都会十分的到位,那么闭包是必用的一个小细节,还是希望大家能够好好钻研一下闭包,祝大家面试成功!😉😉



相关文章
|
5天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
17 0
|
1天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
10 3
|
5天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
38 0
|
5天前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
5天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
5天前
|
Web App开发 JavaScript 前端开发
对于 前端 解释下 node.js的必要性
对于 前端 解释下 node.js的必要性
8 0
|
5天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
5天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
5天前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
5天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。