2025最新出炉--前端面试题八

1. 箭头函数为什么不能 new

回答： 箭头函数不能作为构造函数的原因：

1. 无 [[Construct]] 内部方法：普通函数在定义时会创建 [[Construct]] 方法，用于 new 操作符初始化实例，而箭头函数没有此方法。
2. 无 prototype 属性：普通函数的 prototype 属性指向原型对象，用于实例继承，箭头函数无此属性。

示例：

const Arrow = () => {};
console.log(Arrow.prototype); // undefined
new Arrow(); // TypeError: Arrow is not a constructor

2. Set 和 Map 的区别，Map 和 Object 的区别

回答：

Set vs Map

Map vs Object

示例：Map 的键可以是对象

const map = new Map();
const keyObj = {};
map.set(keyObj, 'value');
console.log(map.get(keyObj)); // 'value'

3. async/await 如何处理错误

回答： 处理 async/await 错误的两种方式：

try/catch 块：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
  } catch (error) {
    console.error('请求失败:', error);
  }
}

Promise 的 .catch() ：

async function fetchData() {
  const response = await fetch('https://api.example.com/data').catch(error => {
    console.error('请求失败:', error);
  });
  if (!response) return;
  const data = await response.json();
}

错误处理的最佳实践：

• 对于可能抛出错误的同步代码，使用 try/catch。
• 对于多个异步操作，可统一在外部捕获错误。

4. 重排（Reflow）和重绘（Repaint）

回答：

重排（Reflow）

• 定义：当元素的几何属性（尺寸、位置）发生变化时，浏览器需重新计算布局。
• 触发条件：
  • 修改宽度、高度、边距、位置（width, height, margin, position 等）。
  • 添加或删除 DOM 元素。
  • 窗口大小调整或字体大小变化。

重绘（Repaint）

• 定义：当元素的外观（颜色、背景等）发生变化，但不影响布局时，浏览器重新绘制元素。
• 触发条件：修改 color, background, visibility 等属性。

优化建议：

减少重排：

• 使用 transform 替代 top/left 修改位置。
• 批量修改 DOM（如使用 DocumentFragment）。

避免强制同步布局：

// 错误示例：强制同步布局
const width = element.offsetWidth; // 触发重排
element.style.width = width + 10 + 'px';

5. 跨域与浏览器同源策略

回答：

跨域的产生原因

浏览器出于安全考虑，实施了 同源策略（Same-Origin Policy），限制以下行为：

• 不同源的脚本访问对方 DOM（如 iframe 内容）。
• 不同源的 AJAX 请求（除非服务端允许）。

同源的定义：协议（http/https）、域名、端口均相同。

跨域解决方案

CORS（跨域资源共享）：

服务端设置响应头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST

JSONP：

• 利用 <script> 标签的跨域能力，通过回调函数获取数据。

代理服务器：

• 前端开发服务器（如 Webpack DevServer）代理请求到后端。

6. JSONP 的原理及数据获取方式

回答：

JSONP 实现步骤

前端定义回调函数：

function handleResponse(data) {
  console.log('数据:', data);
}

动态创建 <script> 标签：

const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

服务端返回回调函数调用：

// 服务端响应内容
handleResponse({ id: 1, name: 'Alice' });

局限性：

• 仅支持 GET 请求。
• 存在安全风险（需信任服务端）。

7. Event Loop（事件循环）详解

回答：

浏览器中的事件循环

事件循环负责协调同步任务、宏任务（MacroTask）和微任务（MicroTask）的执行顺序：

1. 执行栈（同步任务）：同步代码按顺序执行。
2. 微任务队列：
   • 包含 Promise.then、MutationObserver、queueMicrotask。
   • 必须清空当前微任务队列后，才会执行下一个宏任务。
3. 宏任务队列：
   • 包含 setTimeout、setInterval、DOM 事件、I/O 操作。

执行顺序示例：

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
// 输出顺序：1 → 4 → 3 → 2

8. Webpack 的核心功能与使用场景

回答：

Webpack 的核心概念

1. 入口（Entry）：指定打包的起点文件。
2. 输出（Output）：定义打包后的文件路径和名称。
3. Loader：处理非 JavaScript 文件（如 CSS、图片）。
4. 插件（Plugin）：扩展 Webpack 功能（如代码压缩、生成 HTML）。

配置文件示例：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

9. Loader 和 Plugin 的区别

回答：

Loader 示例：处理 CSS 文件

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

Plugin 示例：生成 HTML 文件

new HtmlWebpackPlugin({
  template: './src/index.html'
})

10. Webpack 的热更新（HMR）原理

回答： 热模块替换（HMR）允许在不刷新页面的情况下更新模块：

1. 建立 WebSocket 连接：Webpack DevServer 与浏览器保持长连接。
2. 文件修改监听：Webpack 检测到文件变化后，重新编译模块。
3. 推送更新消息：通过 WebSocket 向浏览器发送更新通知。
4. 模块替换：客户端运行时（如 webpack/hot/dev-server）接收新模块代码并替换旧模块。

关键配置：

devServer: {
  hot: true, // 启用 HMR
},
plugins: [new webpack.HotModuleReplacementPlugin()]