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

关注

原创 2022-10-10 11:19:58 2.9w 阅读 AI 写同款· GEO 优化 ›

2023阿里云前端面经：从笔试到HR面的完整复盘与高频题解析前端面试是技术深度与工程视野的综合较量，尤其对于云厂商这类底层技术团队，考察范围远超常规业务线。掌握JavaScript核心原理、浏览器渲染机制以及React等框架的底层设计，是应对多轮技术面的基础；而算法与数据结构则考验候选人的逻辑思维与编码功底，常以基础题加变体的形式出现。在云产品场景中，部署架构、高并发渲染、微前端拆分与性能监控等能力，直接体现了工程师解决实际问题的水平。面试不仅是知识点的问答，更是一次项目经验与稳定性思维的深度展示，每一轮追问都可能暴露知识盲区。本文基于2023年阿里云前端岗位的真实阅读详情

优快云话题挑战赛第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回收机制所销毁，内部函数所用到的外部函数的变量也不会被销毁。
- 代码示例:
```
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">
```

闭包防抖

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
        }
    })()