前端面试题（持续更新）

ゝ一纸荒年。 2022-11-25 13:18 217阅读 0赞

## JS部分 ##

**1：作用域**  
作用域分为两种：  
一种是静态作用域，这个变量的指向或值，在定义之处就已经得到了明确的确定。  
一种是动态作用域，这个变量的指向或值，在执行的那一刻才能确定是谁（JS中的this指向就是典型的动态作用域）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center]

--------------------

**2：this指向问题**  
在上一个专题中专门有讲，传送门：[this指向问题][this]

// 0. this对象是函数执行时才有的，它是函数执行上下文的一个对象，上下文中包括this对象、函数参数、作用域链
    // 1. 箭头函数的this: 箭头函数没有自己的this，它的this指向到该函数定义时所在的区域的this
    // 2. 显式指定的this: call apply bind
    // 3. 通过对象调用的方法的this: 指向调用函数的对象
    // 4. 直接执行某个函数的this: 不管这个函数从哪来，它的this指向全局对象，在严格模式全局是undefined，非严格模式下浏览器环境是window，node环境是global。使用es6模块的代码默认开启了严格模式
    // 5. 匿名函数的this: 匿名函数this对象指向全局对象，在严格模式全局是undefined，非严格模式下浏览器环境是window，node环境是global。使用es6模块的代码默认开启了严格模式
    // 5.1 如果使用setTimeout setInterval内定义的匿名函数，他们的this对象在浏览器下永远都是window

--------------------

**3：宏任务与微任务**

1.  ⾸先执⾏当前代码中同步的代码，遇⻅异步代码分两种情况（宏任务和微任  
    务），异步代码新起线程去⼯作，当异步任务执⾏完成后再回头执⾏回调
2.  宏任务：setTimeout setInterval都是宏任务
3.  微任务：promise process.nextTick都是微任务

如果想要理解更深刻，可以查看阮一峰老师的JS执行机制：[JavaScript 运行机制详解：再谈Event Loop][JavaScript _Event Loop]

--------------------

**4：变量提升机制（浅谈var const let）**  
为什么不会常使用var 来定义变量？因为var的变量提升机制

ES5 中作用域有：全局作用域、函数作用域。没有块作用域的概念。  
ES6 中新增了块级作用域。块作用域由 \{ \} 包括，if语句和 for语句里面的\{ \}也属于块作用域。

1-var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。

2-let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

3-const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改  
注意点：const只是确保指针不发生改变，但是如果修改对象的属性是不会改变const的指向的，所以是被允许的，只要是const定义的引用类型的指针不发生改变，其他的改变都是可以允许的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 1]

--------------------

**5：垃圾回收机制和内存泄漏问题**  
常见的内存泄露问题：  
全局变量引起的内存泄漏。  
闭包引起的内存泄漏。  
遗忘的DOM引用

什么是垃圾回收机制：  
js引擎会对运⾏中的程序使⽤的数据进⾏扫描，如果出现没有在使⽤的数据，那  
么垃圾回收程序会销毁这些数据，释放他们占⽤的内存。

运行的时机：  
IE6的时候，如果声明的变量超过256个，字符串占⽤的内存⼤⼩超过64k，  
使⽤的对象超过个4096时，垃圾回收程序就会运⾏，它开始扫描程序使⽤  
的变量，回收其中没有在使⽤的变量（释放它们占⽤的内存空间）。  
chrome等浏览器对这个阈值放⼤了⼀倍处理，在某次回收后，看回收的变  
量占总变量⽐例，如果这个⽐例超过85%，说明需要清理⼯作，那么此时  
应该降低垃圾回收的阈值，将其缩⼩⼀倍；如果这个⽐例⼩于15%，说明  
不需要清理⼯作，那么就将垃圾回收的阈值调⼤⼀倍。

如何解决？  
引⽤计数，js引擎会计算⼀个变量被使⽤的次数，当它的使⽤次数为0时，  
在下次垃圾回收程序运⾏时就清理这个变量，但是这种⽅案有⼀个问题，⽆  
法清除 循环引⽤ 的变量  
标记清除，从全局变量开始，对每个变量进⾏标记，第⼀次来⼀波标记。下  
次垃圾回收程序运⾏，对此时程序的每个变量再进⾏⼀波标记，⽐对两次标  
记中的变化。如果上次的变量在这次标记中没有使⽤了，此时就清理掉。

或者是更好的ES6新数据结构：  
WeakSet 和 WeakMap

--------------------

## h5c3 ##

## Vue ##

# 跨域 #

# 其他 #

**第一题：**  
移动端1px（0.5px）边框问题xrem（面试兼容问题）

解决方案：
     使用伪元素做这条线，伪元素的宽或高设置为1px,在JS中设置transform:scale(0.5)或者在
     css中设置(css设置的前提是JS有获取屏幕密度dpr并设置到页面元素)[data-dpr=2]{ 设置缩放比例}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/3882f8e0894444418a2cd71f19917ddc.png
[this]: https://blog.csdn.net/motility_scy/article/details/107682467
[JavaScript _Event Loop]: http://www.ruanyifeng.com/blog/2014/10/event-loop.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/9673f1f0926f48c69b324e66ef89afd4.png