记录某三年经验前端岗面试题（20-30K）_面试者一半会问三年的前端什么面试题

前几天帮一个两年多前端学长做面试复盘，岗位要求三年经验，薪资20-30/月，问到的题目及追问的面试风格给我留下了深刻印象，面试时长1h左右。整理了下，面试问题及追问问题大致如下：

1. Vue的技术栈有哪些？
   看具体项目：vue+typescript+scss+vue-router

2. UI框架用什么？
   移动端用Vant，PC端用Element-UI
   自己封装UI组件，造轮子

3. JS基础–防抖和节流
   节流，用于后台的数据请求，flag控制用户请求频率，设置时间，flag初始为true，点击为false，下此true之前请求无效，防止过于频繁的请求
   防抖，送外卖举例

4. 数组常用的API
   filter、sort排序和高阶数组如map、foreach、reduce。
   追问：sort有什么缺陷？使用需要注意的点？
   使用时function中传两个值，两个进行比较。
   追问：不传函数，直接传数组会有什么问题？
   排序规则问题，优先级

5. 函数的this？
   理解，指向。根据调用动态决定动态指向。
   call、bind、this指向
   追问：具体场景中this的指向？
   两种情况全局调用
   new怎么实现它。
   追问：如何去实现一个new
   new的过程中会把this指向函数返回的值(对象)

6. JS继承
   es6语法：class定义一个父类，再class定义一个子类 extends 父类，在子类中使用关键字super。
   追问：super做了一个什么事？
   super把父类中的属性方法拷贝过来
   追问：constructor是什么东西？
   构造器
   追问：除了es6继承，还有哪些继承方法？
   原型继承，es6基于原型继承。
   追问：不用XX转化实现继承？(没听清，大约在20’48’前)
   方法：类名.prototype.方法
   属性：

7. JS原型链是什么，代码执行时原型链如何执行？

8. Vue中常用的特性有哪些？
   双向数据绑定，v-model，watch，computed，生命周期函数。
   追问：生命周期函数有哪些？
   8种生命周期钩子，及keep-alive相关的两个生命周期钩子：active和deactive，子组件中发生错误进行上报的生命周期钩子catch error。

9. Vue中常用的一些指令。
   v-bind、v-clock、v-for、v-model。
   追问：v-bind和v-model的语法糖
   追问：v-model如何实现语法糖的效果？即v-modle解析时和v-bind有什么区别？如何通过v-bind实现双向绑定？
   追问：v-show和v-if区别？
   v-show会生成DOM节点，但隐藏了
   v-if不会生成DOM节点
   追问：display:none和opacity设置透明度的区别？

10. Button按钮封装是怎么做的，考量的点有哪些？
    loading、button-group、样式需求，click事件点击的时候传出去，size参数调节做进去，disabled属性，根据传入参数绑定相应CSS。
    追问：封装中的input双向绑定如何实现的？
    追问：Button弹出如何做的？
    弹出框放到body最外层，避免遮挡
    追问：什么类型的遮挡问题？
    设置index，以及影响文档流问题
    追问：如何定位及计算button位置？获取坐标注意什么点？
    使用fixed定位，找到按钮元素坐标
    追问：滚动条获取位置