「前端」2024.7 华泰面经

总体面试体验还不错，由于面试只有半个小时，没有手撕环节，感觉面试官对我的项目不感兴趣，就是猛问八股

1. 为什么选择前端？
1. 离用户更近，个人喜好
2. 箭头函数和普通的函数有什么区别
1. 箭头函数是ES6新增的特性，没有自己的 this，它的this和外层定义它的环境一致，所以特别适合用作回调函数，
2. 同时也因为这个原因，所以不能使用它定义类（主要是因为箭头函数没有prototype）
3. 没有arguments对象，可以使用…args代替
3. 那箭头函数的this是什么时候指定的？
1. 静态编译的时候指定（准确来说是函数定义时指定）
4. 那可不可以用call和apply调用箭头函数？
1. 不可以，因为要传入this
2. 实际上是可以的，只是不能改变this的指向
5. 那可以使用构造函数来调用吗？也就是用new来调用
1. 不可以，因为new的过程中要绑定this
2. 主要是因为没有prototype属性，所以不能new
6. 我们在遍历数组/对象的时候可以使用for…in和for…of操作符来遍历，请你谈谈这两个操作符有什么区别？
1. 如果要是用of操作符来遍历一个对象，他必须是可遍历的（of用来遍历可迭代对象，需要具有Symbol.iterator属性）
2. 没怎么用过in运算符（in用来遍历对象的可枚举属性，比如对象的key，数组的index）
7. 如果需要让普通的对象也可以使用for…of操作符来遍历，我该怎么做？
1. 可能要给它的原型添加一个方法，但具体的名字没说出来（需要给这个对象定义Symbol.iterrator方法，这个方法返回一个next函数，在函数内部返回一个对象，value属性返回[key, value]对，done属性返回是否已经完成迭代）
8. 平时开发过程中对异步应该用的比较多吧，能不能谈谈你处理异步场景的时候用到了哪些方法？
1. 异步是一个非常广泛的场景，包括js时间循环中的宏任务微任务就是为了异步处理而生的
2. 提到异步，我们首先想到的是网络请求，网络请求由于它的性质天生具有异步性
3. Promise就是用于处理异步的，在es6之前使用.then .catch .finally处理，es6之后使用async await来处理
4. setTimeout也是一种异步，不管等待多久，都要通过事件循环来推进（也就是说就是等待时间是0也不会马上执行）
5. 在Vue和React中，响应式相关的很多代码都是异步的，比如你刚改变一个响应式变量，然后立马去读取，读取到的值可能不是最新的，只有nextTick之后拿到的才是最新的
6. 比如watchEffect和useEffect中，通过监控对应的依赖触发更新，这也是异步的一种场景
9. 在useEffect整个生命周期里，他执行的时机是什么？
1. 组件挂载时
2. 依赖变化时
10. 什么时候卸载的时候才执行呢？
1. 在useEffect的回调函数里return一个函数
11. useMemo和useCallback用过吗
1. 没用过
2. useMemo提现了React和Vue的差距，前者是Opt-out的，后者是Opt-in的，useMemo 接收一个回调函数和依赖数组，只会在依赖变化时计算，而不会每次重新渲染都计算（用于跳过昂贵的计算和组件的重新渲染）
3. useCallback接收一个回调函数和依赖数组，只有当依赖数组变化时，才返回新的函数实例（用于避免匿名函数的引用发生改变，从而导致意外的组件重渲染）
12. useRef 和 useState 之间的主要区别是什么？
1. useRef 用于保存对象或DOM元素的最新引用，始终保持最新的值。
2. 而 useState 用于状态管理，虽然其返回的状态值可能会因更新操作而更新，但在某些情况下并不保证是最新的。
13. 讲讲Debounce函数的实现原理
1. 每次用户点击的时候启动一个定时器，然后在回调函数里return一个清除定时器的函数，这样就可以在下一次更新的时候把上一个定时器清掉，这样在停止触发的时候，只有最后一个定时器没有被清除，这样就只有最后一个被触发了（用ref记录定时器ID，下一次清掉就行）
14. 那节流函数呢？
1. 每次都记录时间戳，每次触发的时候判断距离上一次触发的时间到没到阈值，如果没到就继续开一个定时器，到了就触发
15. 如何获取一个对象的原型？
1. getPrototypeof或者非标准的方法__proto__
16. 一个函数的原型的constructor属性等于什么？
1. 等于他自己
17. undefined原型是什么？
1. null（undefined和null都是原始类型，没有原型）
18. null的原型是什么？
1. null是原型链的尽头，但实际上js里null的原型是Object，但这是一个bug（typeof null 确实会返回Object
19. 讲讲HTML标准的事件模型？
1. 捕获阶段（从外向内）、触发阶段、冒泡阶段（从内向外）
20. 如果我需要对一个时间在捕获阶段和冒泡阶段都响应，该怎么做？
1. 没聊出来（addEventListener可以添加第三个参数为true来在捕获阶段响应事件，那实际上只需要添加两次，一次true一次false就行了）
21. 聊聊React和Vue的异同？
1. 两者都是现代的开发框架，都支持声明式的编程和响应式，都有MVVM的双向数据绑定，但React使用jsx返回DOM结构，Vue虽然也支持渲染函数，但主要使用template写模板来定义结构
2. 细节其实主要应该讲响应式上的差距，但面试的时候没聊出来，具体见：https://mush3r.notion.site/Vue-React-e937073293bc493aa63cf74c17bd7f0e?pvs=4
22. 聊聊css的定位
1. static（也就是不写）、relative、absolute、fixed；static按照标准的文档流式布局，relative是相对定位，依赖于最近已定位的祖先元素来作相对定位；absolute是绝对定位（脱离文档流，不再占据原有的位置）；fixed是固定在屏幕中的某个位置
23. 如何居中一个元素
1. flex
2. 使用translateX和translateY先讲元素向右下移动一半的屏幕宽度和高度，再向左上移动一半的元素宽度和高度
24. 你有接触过前端工程化吗，比如webpack，简要聊聊前端为什么需要webpack
1. 接触过，我的工程都是使用nextjs和vite打包上线的
2. 比如你会用sass写样式，但是浏览器只支持css，你需要预处理器进行转换，比如你需要es6的代码运行在es5的环境上，你就需要babel；这些都是webpack的loader
3. 同时还有plugin用于全生命周期的介入，去实现一些更复杂的功能