0


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

CSDN话题挑战赛第2期
参赛话题:面试宝典

✅ 作者简介:一名迈入大三的大学生,致力于提高前端开发能力
✨ 个人主页:前端小白在前进的主页
🔥 系列专栏 : 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回收机制所销毁,内部函数所用到的外部函数的变量也不会被销毁。- 代码示例:functionouter(){let name ='james'let age =37returnfunction(){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,那么就会出问题,这样的话会使内存中不断的储存临时变量,就会导致内存泄漏,所以闭包的缺点就是:会造成内存泄漏
  • 项目场景

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

防抖

节流

代码示例:

  1. 在这里写一个搜索框,搜索框的内容输入频次可以使用防抖节流来优化。<inputtype="text"id="search">
  2. 闭包防抖search.oninput =(function(){let timer =nullreturn()=>{if(timer){clearTimeout(timer)} timer =setTimeout(()=>{ console.log('发送了ajax请求');},500)}})()
  3. 闭包节流search.oninput =(function(){let flag=truereturn()=>{if(flag){setTimeout(()=>{ console.log('发送了ajax请求'); flag =true},500)} flag =false}})()

闭包的实战常见场景主要是在防抖和节流中,就是为了防止在防抖和节流中我们创建的

临时变量

会丢失!

个人总结

闭包是js高级中一个重要的知识点,

闭包的存在就是为了进行一些项目的优化

,可能在日常开发中小伙伴们使用不到,但是一旦开发项目对所有的细节把控都会十分的到位,那么闭包是必用的一个小细节,还是希望大家能够好好钻研一下闭包,祝大家面试成功!😉😉


本文转载自: https://blog.csdn.net/m0_52040370/article/details/127131663
版权归原作者 前端小白在前进 所有, 如有侵权,请联系我们删除。

“2022前端面经---(js高级)一文让你搞懂闭包”的评论:

还没有评论