虾皮前端日常实习面经

虾皮前端日常实习面试常见问题及解析如下：

1. 箭头函数和普通函数的区别

   语法：箭头函数使用 => 定义，参数列表无需括号（单参数时），函数体无花括号时直接返回表达式结果。

   this 绑定：箭头函数无独立 this，继承外层作用域的 this；普通函数的 this 由调用方式决定（如直接调用、方法调用、call/apply/bind）。

   构造函数：箭头函数不能作为构造函数（无 prototype 属性），普通函数可以。

   arguments 对象：箭头函数无 arguments，需通过剩余参数（...args）获取；普通函数有 arguments 对象。

2. 箭头函数为什么不能改变 this

   箭头函数的 this 在定义时已静态绑定到外层作用域（词法作用域），无法通过调用方式（如 call、apply）动态修改。

3. 箭头函数充当构造函数哪一步会报错

   在 new 调用时，引擎尝试访问箭头函数的 prototype 属性（用于设置新对象的 __proto__），但箭头函数无 prototype，导致报错 TypeError: ... is not a constructor。

4. 怎么理解箭头函数 this 指向继承外部作用域

   箭头函数的 this 由定义时的外层函数或全局作用域决定。例如：

   const obj = { name: 'A', func: function() { setTimeout(() => console.log(this.name), 100); // 输出 'A'（继承外层 `this`） }};

5. 平时怎么使用箭头函数

   简化回调函数（如数组方法 map、filter）。

   需要固定 this 的场景（如事件处理、定时器）。

   避免嵌套函数中 this 指向问题。

1. 浏览器的缓存机制

   强缓存：直接从本地缓存读取资源，不发起请求（状态码 200 (from cache)）。

   协商缓存：向服务器验证资源是否更新，若未更新则返回 304 Not Modified，使用本地缓存。

2. 怎么判断强缓存还是协商缓存

   强缓存：通过 Expires（HTTP/1.0，绝对时间）或 Cache-Control（HTTP/1.1，相对时间，如 max-age=3600）控制。

   协商缓存：通过 Last-Modified/If-Modified-Since 或 ETag/If-None-Match 验证。

3. 协商缓存为什么要同时有 ETag 和 Last-Modified

   Last-Modified：基于文件最后修改时间，精度为秒，可能因服务器时间不同步或文件内容未变但修改时间变化导致无效。

   ETag：基于文件内容哈希值，精度更高，但计算开销大。两者结合可提高缓存命中率。

4. 协商缓存的具体过程

   浏览器首次请求资源，服务器返回 Last-Modified 和 ETag。

   后续请求中，浏览器携带 If-Modified-Since（Last-Modified 值）和 If-None-Match（ETag 值）。

   服务器对比资源状态，若未修改则返回 304，否则返回新资源及更新后的头字段。

1. 在浏览器的控制面板中的磁盘内存和浏览器内存

   磁盘内存（Disk Cache）：存储静态资源（如 HTML、CSS、JS），长期保存，容量大。

   浏览器内存（Memory Cache）：存储临时数据（如 DOM 节点、JS 对象），关闭标签页后释放，速度快。

1. Vue2 和 Vue3 的区别

   响应式原理：Vue2 用 Object.defineProperty，Vue3 用 Proxy（支持数组监听、动态属性）。

   组合式 API：Vue3 引入 setup、ref、reactive 等，逻辑复用更灵活。

   性能优化：Vue3 编译时优化（如静态提升、Tree-shaking），体积更小。

   Fragment：Vue3 支持多根节点组件。

2. Vue3 响应式的优势

   深度监听：无需手动 Vue.set 添加属性。

   性能更好：惰性代理（按需监听），减少开销。

   支持更多数据结构：如 Map、Set。

3. Vue2 怎么监听对象属性的增加减少

   使用 Vue.set(obj, key, value) 或 this.$set(obj, key, value) 动态添加响应式属性。

   替换整个对象（this.obj = {...this.obj, newKey: value}）。

4. Vue3 组合式 API 的优缺点

   优点：逻辑组织更清晰，复用性强（通过自定义 Hook），类型推断友好。

   缺点：学习曲线陡峭，代码拆分可能导致碎片化。

1. Webpack 和 Vite 的区别

   启动速度：Vite 基于原生 ESM，无需打包，启动更快；Webpack 需全量打包。

   开发体验：Vite 热更新（HMR）更快，Webpack 需配置优化。

   生产构建：Webpack 生态成熟，Vite 用 Rollup 优化输出。

2. Vite 的缺点

   兼容性：依赖现代浏览器（支持 ESM）。

   插件生态：不如 Webpack 丰富。

   复杂场景：对 CSS 预处理、代码分割等需额外配置。

3. 为什么 Vite 的开发速度更快

   利用浏览器原生 ESM 加载模块，跳过打包步骤。

   按需编译，仅修改的文件触发更新。

1. 你怎么用 AI 解决问题

   使用 AI 工具（如 ChatGPT、Copilot）快速获取代码示例或调试建议。

   通过自然语言描述问题，AI 提供解决方案思路或文档链接。

2. 会记录解决问题的方法论吗

   记录问题场景、解决方案、复现步骤（如写博客或笔记）。

   总结通用模式（如错误类型、调试技巧）。

3. 怎么看待前端和 AI 的关系

   辅助工具：AI 可提升开发效率（如自动生成代码、优化建议）。

   领域拓展：前端可结合 AI 实现智能化交互（如推荐系统、视觉识别）。

   不可替代性：创意、复杂逻辑设计仍需人类主导。

1. 有没有了解最新的构建工具

   除 Vite 外，可关注 Turbopack（Rust 编写，基于 SWC）、Rspack（Webpack 替代方案）、esbuild（极速打包）。

   趋势：基于原生模块系统、多线程/Rust 优化、零配置倾向。

建议：

• 结合项目经验深入理解原理（如实现一个简易响应式系统）。
• 动手实践缓存策略、Vue3 组合式 API 等。
• 关注社区动态（如 Vite 5.0 更新、Vue 3.4 新特性）。