---
tags: [Frontend, Exam, Axios, React, Vue, JavaScript, CSS, Node.js, HTTP]
create time: 2026-04-30 14:30
---

# 武科大 - 第六次前端摸底测试（错题复盘）

## 概述

本文档记录金山考试 - 武科大第六次前端摸底测试的**全部 110 道单选题错题**。本次测试覆盖 JavaScript 基础、事件机制、异步编程、Axios/Fetch、浏览器 API、HTTP 协议、CSS、Vue 3、React Hooks、Node.js / npm、Webpack 等知识领域。

错题库已按**知识点主题**分组，每题附带详细解析、代码示例和图解，帮助查漏补缺。

> [!summary] 错误统计
> - **总题数**：110 道题
> - **错题数**：27 道
> - **正确率**：~75%
> - **薄弱领域**：事件机制理解、异步执行顺序、Vue/React 深度概念、HTTP 状态码区分

## 错题详解

### 一、事件处理

#### Q2 — 取消默认事件 vs 阻止冒泡 ❌ 答 A，正确 C

> **题目**：如何取消默认事件效果？
>
> | 选项 | 内容 |
> |------|------|
> | A | `cancelBubble=true` |
> | B | `stopPropagation()` |
> | C | `preventDefault()` ✅ |
> | D | `return` |

> [!warning] 核心混淆
> `cancelBubble` 和 `stopPropagation()` 是**阻止事件冒泡**，不是取消默认行为！
>
> - `e.preventDefault()` → 取消元素的**默认动作**（如 `<a>` 跳转、`<form>` 提交）
> - `e.stopPropagation()` → 停止事件向**父元素传播**（不冒泡了）
> - `e.cancelBubble = true` → IE 旧版写法，等同于 `stopPropagation()`
> - 在行内 `onclick="return false"` 可以等效于 `preventDefault() + stopPropagation()`

```mermaid
flowchart LR
    subgraph "事件流"
        A[捕获阶段] --> B[目标阶段]
        B --> C["冒泡阶段"]
    end

    preventDefault["preventDefault()\n→ 阻止默认行为\n不影响冒泡"] -.-> B
    stopPropagation["stopPropagation()\n→ 阻止向上冒泡\n不影响默认行为"] -.-> C

    style preventDefault fill:#EF4444,color:#fff
    style stopPropagation fill:#3B82F6,color:#fff
```

> [!tip] 常见默认行为
> - `<a href>` 点击跳转
> - `<form>` 提交刷新页面
> - 右键菜单
> - 文本选择拖拽
> - 鼠标滚轮页面滚动

---

#### Q19 — CSS 继承性 ❌ 答 D，正确 C

> **题目**：下面哪个属性不会继承？
>
> | 选项 | 内容 |
> |------|------|
> | A | `color` |
> | B | `font-size` |
> | C | `border` ✅ |
> | D | `line-height` |

> [!answer] 解析
> CSS 中只有**部分属性会继承**给子元素。可继承的属性主要是与**文本渲染**相关的：`color`、`font-*`、`line-height`、`text-*`、`visibility` 等。而布局相关属性几乎都不继承：`border`、`margin`、`padding`、`width`、`height`、`background` 等。

```mermaid
graph TB
    subgraph "可继承的属性"
        T1["color"]
        T2["font-size / font-family"]
        T3["line-height"]
        T4["text-align"]
    end

    subgraph "不可继承的属性 ← 重点记 border!"
        B1["border"]
        B2["margin / padding"]
        B3["width / height"]
        B4["background"]
    end

    style B1 fill:#EF4444,color:#fff
```

---

#### Q16 — 获取 CSS 样式 ❌ 答 A，正确 B

> **题目**：下面哪个方法可以获取元素的 CSS 样式？
>
> | 选项 | 内容 |
> |------|------|
> | A | `getElementStyle()` |
> | B | `getComputedStyle()` ✅ |
> | C | `getStyle()` |
> | D | `getCurrentStyle()` |

> [!answer] 解析
> - **标准方法**：`window.getComputedStyle(element)` → 返回所有最终计算后的样式
> - **IE8 兼容**：`element.currentStyle`（已过时，仅 IE 支持）
> - A、C 都不是原生 API

```js
const el = document.querySelector('.box');
const styles = window.getComputedStyle(el);
console.log(styles.backgroundColor); // 计算后的值，如 "rgb(255, 0, 0)"
```

> [!tip] `getComputedStyle` vs `el.style`
> | 方法 | 能读什么 | 返回值类型 |
> |------|---------|-----------|
> | `el.style.prop` | 只读元素**内联样式**（`style="..."`） | 字符串 |
> | `getComputedStyle()` | 读**所有生效**样式（含 CSS 文件、类） | CSSStyleDeclaration 对象 |

---

#### Q31 — 阻止事件冒泡 ❌ 答 C，正确 B

> **题目**：用于阻止事件冒泡的方法？
>
> | 选项 | 内容 |
> |------|------|
> | A | `事件对象.stopDeafault()` |
> | B | `事件对象.stopPropagation()` ✅ |
> | C | `事件对象.preventPropagation()` |
> | D | `事件对象.preventDefault()` |

> [!answer] 解析
> 注意拼写！`stopPropagation()` 是标准方法。A 选项 `stopDeafault` 是个拼写陷阱（应为 `preventDefault`），D 是阻止默认行为而非冒泡。

---

#### Q32 — 事件委托 ❌ 答 D，正确 D（此题作答正确，但文档中标注为错题——请确认）

> **题目**：关于事件委托，说法错误的是？
>
> | 选项 | 内容 |
> |------|------|
> | D（错误说法） | 事件委托中的 `this` 与 `e.target` 指向同一个对象，它们可以随意互换 |

> [!answer] 解析
> 事件委托中绑定的回调函数的 `this` 指向**注册事件的父元素**，而 `e.target` 指向**实际触发事件的子元素**——两者可能不同！

```js
ul.addEventListener('click', function(e) {
    console.log(this);   // <ul>（委托绑定的元素）
    console.log(e.target); // <li>（实际点击的元素）
});
```

---

#### Q17 — TypeError ❌ 答 A（其实正确），待核实

> [!note] 本题标注有误：正确答案应为 **B**（将函数作为对象使用会抛 TypeError）。`undefined` 变量操作抛出的是 `ReferenceError`。原题答案可能有误。

---

### 二、JavaScript 数据类型与作用域

#### Q7 — 不属于 JS 对象数据类型的 ❌ 答 A，正确 D

> **题目**：下列不属于 JS 对象（引用）数据类型的是？
>
> | 选项 | 内容 |
> |------|------|
> | A | RegExp |
> | B | Function |
> | C | Array |
> | D | String ✅（原始类型） |

> [!answer] 解析
> JS 的数据类型分两类：
>
> ```mermaid
> graph TD
>     All["JS 数据类型"] --> Prim["原始类型 Primitive"]
>     All --> Ref["引用类型 Object"]
>
>     Prim --> P1["String"]
>     Prim --> P2["Number"]
>     Prim --> P3["Boolean"]
>     Prim --> P4["null"]
>     Prim --> P5["undefined"]
>     Prim --> P6["Symbol"]
>     Prim --> P7["BigInt"]
>
>     Ref --> R1["Object"]
>     Ref --> R2["Array"]
>     Ref --> R3["Function"]
>     Ref --> R4["RegExp"]
>     Ref --> R5["Date"]
>
>     style P1 fill:#EF4444,color:#fff
>     style R2 fill:#4FC08D,color:#fff
>     style R3 fill:#4FC08D,color:#fff
>     style R4 fill:#4FC08D,color:#fff
> ```
>
> `String` 是**原始类型**（ primitive ），而 RegExp、Function、Array 都是对象类型（继承自 Object）。

---

#### Q23 — typeof +'136' ❌ 答 D，正确 B

> **题目**：`console.log(typeof +'136')` 输出的结果？
>
> > [!tip] 一元运算符 `+` 会将字符串转为数字
> > `'136'` → `Number('136')` → `136`，所以 `typeof 136` → `"number"`

---

#### Q24 — 闭包作用域 ❌ 答 A（实际作答正确，待核实）

> [!note] `f2` 访问的是外层 `f1` 中的 `num = 123`，通过闭包实现。输出 123。若答案为 A 则作答正确。

---

### 三、异步编程 & 执行顺序

#### Q13 & Q44 — Promise + setTimeout 执行顺序 ❌ 答 C/Q44答D，正确 A/C

> **题目**（Q13 等价于 Q44）：以下代码输出顺序？
>
> ```js
> setTimeout(function () { console.log(1); }, 0);
> new Promise(function executor(resolve) {
>     console.log(2);
>     for (var i = 0; i < 10000; i++) { i == 9999 && resolve(); }
>     console.log(3);
> }).then(function () { console.log(4); });
> console.log(5);
> ```
>
> **答案：`2 3 5 4 1`**

> [!danger] 高频考点：JS 执行模型
> JS 是单线程的，事件循环 Event Loop 的执行优先级如下：
>
> ```mermaid
> flowchart TD
>     Sync["同步代码 → 立即执行"] --> Micro["微任务 Microtask<br/>Promise.then / queueMicrotask"]
>     Micro --> Macro["宏任务 Macrotask<br/>setTimeout / setInterval"]
>
>     style Sync fill:#4FC08D,color:#fff
>     style Micro fill:#EAB308,color:#000
>     style Macro fill:#3B82F6,color:#fff
> ```
>
> **逐行分析：**
> 1. `setTimeout(...0)` → 注册为**宏任务**，放入定时器队列
> 2. `new Promise(...)` → 构造函数是**同步执行**的 → 打印 `2`
> 3. for 循环内调用了 `resolve()` → 但 `.then()` 是**微任务**，不会立刻执行
> 4. `console.log(3)` → 同步代码 → 打印 `3`
> 5. `console.log(5)` → 同步代码 → 打印 `5`
> 6. 同步代码执行完毕 → 清空**微任务** → `.then(() => 4)` 执行 → 打印 `4`
> 7. 微任务清空 → 进入下一轮宏任务 → `setTimeout` 回调 → 打印 `1`
>
> **顺序：2 → 3 → 5 → 4 → 1**

> [!tip] 记忆口诀
> **"同步先走，微任务跟上，宏任务压轴"**

---

#### Q43 — var + setTimeout 闭包问题 ❌ 答 B，正确 A

> **题目**：下面的输出结果是什么？
>
> ```js
> console.log(8);
> for (var i = 0; i < 5; i++) {
>     setTimeout(function () { console.log(i); }, 1000 * i);
> }
> console.log(9);
> ```
>
> **答案：`8, 9, 5, 5, 5, 5, 5`**

> [!warning] 经典闭包陷阱
> `var` 声明的 `i` 是**函数作用域**（全局）变量，所有 setTimeout 回调共享同一个 `i`。当回调执行时，for 循环早已结束，`i === 5`（条件 `i < 5` 不成立时的值）。
>
> **解决方法：**
> ```js
> // 方案1：let（块级作用域）
> for (let i = 0; i < 5; i++) { /* 每个循环创建独立 i */ }
>
> // 方案2：IIFE 闭包保存快照
> for (var i = 0; i < 5; i++) {
>     (function(j) { setTimeout(() => console.log(j), 1000 * j); })(i);
> }
> ```

---

#### Q6 — 参数传值 vs 传引用 ❌ 答 A（实际正确，待核实）

> [!note] 函数参数传值，`num = num + 1` 只修改局部变量，原值不变。答案 A 正确。

---

#### Q14 — 数组传引用 ❌ 答 C（实际正确，待核实）

> [!note] 数组是引用类型，push 直接修改原数组，答案 C 正确。

---

#### Q27 — 对象引用 ❌ 答 B（实际正确，待核实）

> [!note] `obj2 = obj1` 是引用赋值，修改 obj2.uname 也影响 obj1。答案 B 正确。

---

### 四、浏览器 API & BOM

#### Q5 — AJAX 核心对象 ❌ 答 C（实际正确，待核实）

> [!note] `XMLHttpRequest` 首字母大写全称才是标准答案，`xhr` 只是变量名缩写。答案 C 正确。

---

#### Q9 — load vs DOMContentLoaded ❌ 答 B（实际正确，待核实）

> [!note] `window.onload`（即 `load` 事件）在 HTML 及其所有外部资源（图片、样式表、iframe）全部加载完毕后触发。`DOMContentLoaded` 只需 DOM 树构建完成即可。题目问的是"HTML + 所有外部资源都加载完成"，所以是 `load`。

---

#### Q73 — BOM 中操作地址栏的对象 ❌ 答 D（实际正确，待核实）

> [!note] `location` 对象提供 URL 相关信息和操作。

---

#### Q36 — :nth-child 伪类 ❌ 答 D，正确 C

> **题目**：`:nth-child()` 用于选择什么？
>
> > [!answer] `:nth-child(n)` 根据**序号**匹配子元素。例如 `:nth-child(2)` 选中第 2 个子元素，`:nth-child(odd)` 选奇数位。它不看元素类型，只看位置。

---

#### Q37 — text-overflow 用途 ❌ 答 C（实际正确，待核实）

> [!note] `text-overflow: ellipsis` 用于隐藏超长文本并用省略号替代，需配合 `white-space: nowrap; overflow: hidden` 使用。

---

#### Q38 — AJAX 请求完成事件 ❌ 答 A（实际正确，待核实）

> [!note] `xhr.onload` 在请求成功完成后触发（readyState === 4）。

---

#### Q40 — 解析 JSON 响应的对象 ❌ 答 B，正确 A

> **题目**：接收到 `xhr.responseText` 后使用哪个对象解析？
>
> > [!answer] `JSON.parse()`。xhr 收到的永远是字符串，需要手动 `JSON.parse(responseText)` 转换为 JS 对象。注意不要和 `eval()` 混用——`JSON.parse()` 更安全、更快。

---

#### Q28 — 自定义 data- 属性 ❌ 答 D（实际正确，待核实）

> [!note] `dataset` 是一个 `DOMStringMap` 对象，不是函数。通过 `element.dataset.id` 访问 `data-id` 的值。

---

#### Q29 — innerText vs innerHTML ❌ 答 D（实际正确，待核实）

> [!note] `innerText` 只处理纯文本，不解析标签；`innerHTML` 会解析 HTML 标签。D 说两者作用一致是错误的。

---

#### Q30 — 事件委托获取目标元素 ❌ 答 A（实际正确，待核实）

> [!note] `event.target` 指向真正触发事件的元素，`.tagName` 获取标签名。

---

#### Q33 — localStorage vs sessionStorage ❌ 答 D，正确 A

> **题目**：关于 localStorage/sessionStorage，下列说法错误的是？
>
> > [!answer] A 错误——localStorage/sessionStorage **只能存储字符串类型**的数据。存储对象需要先 `JSON.stringify()`，读取后 `JSON.parse()`。虽然看起来像能存任意类型，但实际上底层全部存为字符串。

---

#### Q34 — 定时器 ❌ 答 C（实际正确，待核实）

> [!note] `setTimeout` 不是立即执行的，它会在延迟时间后将回调加入宏任务队列等待执行。

---

#### Q35 — classList 方法 ❌ 答 C（实际正确，待核实）

> [!note] 切换类的方法是 `classList.toggle()`，没有 `toggleClass()` 这个方法名。

---

### 五、HTTP & 网络

#### Q51 — HTTP 400 状态码 ❌ 答 B，正确 D

> **题目**：HTTP 状态码 400 表示什么意思？
>
> > [!warning] 高频易混的四组 4xx 状态码
> >
> > | 状态码 | 含义 | 典型场景 |
> > |--------|------|----------|
> > | **400** | Bad Request | 请求格式错误、参数校验失败 |
> > | **401** | Unauthorized | 未认证/token 过期 |
> > | **403** | Forbidden | 无权限访问（已认证但级别不够） |
> > | **404** | Not Found | 资源不存在 |
>
> 本题容易把 400（请求参数错误）和 401（token 过期）搞混。记住：**400 是客户端语法/参数问题，401 是身份验证问题**。

---

#### Q52 — Content-Type 的作用 ❌ 答 D，正确 A

> **题目**：Content-Type 通常用于指定什么？
>
> > [!answer] **请求体的类型**。告诉服务器"我的请求体是 JSON / form-urlencoded / multipart/form-data"。
> >
> > 常见值：
> > - `application/json` — 发送 JSON 数据
> > - `application/x-www-form-urlencoded` — 传统表单提交
> > - `multipart/form-data` — 文件上传
> > - `text/plain` — 纯文本

---

### 六、Axios & 请求封装

#### Q12 — 响应拦截器错误处理 ❌ 答 A，正确 C

> **题目**：响应拦截中想处理异常且仍被 catch 捕获，正确的是？
>
> > [!answer] `axios.interceptors.response.use(() => {}, error => { return Promise.reject(error) })`
> >
> > 关键点：
> > 1. `response.use` 接收**两个参数**：第一个是成功回调，第二个是错误回调
> > 2. 错误回调中必须 `return Promise.reject(error)` 才能让下游 `.catch()` 收到
>
> ```js
> // 正确写法 —— 双参数形式
> axios.interceptors.response.use(
>     response => response,           // ✅ 成功回调（第一参数）
>     error => Promise.reject(error)  // ✅ 失败回调（第二参数）
> );
>
> // 错误写法 —— 只给了一个参数，当成成功回调处理了
> axios.interceptors.response.use(error => {...})  // ❌ error 被当成成功处理
> ```

---

### 七、Node.js & npm

#### Q49 — Node.js 发 HTTP 请求的模块 ❌ 答 D，正确 A

> **题目**：Node.js 中允许执行 HTTP 请求的内置模块？
>
> > [!answer] `http` 模块。它提供 `http.request()` 和 `http.get()` 方法用于发起 HTTP 请求。`https` 模块也存在，但 `http` 是最通用的标准答案。
>
> ```js
> import http from 'node:http';
>
> const req = http.get('http://example.com', (res) => {
>     let data = '';
>     res.on('data', chunk => data += chunk);
>     res.on('end', () => console.log(JSON.parse(data)));
> });
> ```

---

#### Q10 — Node.js 描述不正确的一项 ❌ 答 D，正确 A

> **题目**：下列关于 Node.js 描述不正确的是？
>
> > [!answer] Node.js **不能操作 DOM**。DOM（Document Object Model）是浏览器提供的 API，Node.js 运行在服务端没有浏览器环境。Node.js 可以做文件操作 (`fs`)、发请求 (`http/https`)、爬虫等。
>
> > [!tip] 如果非要在 Node.js 中操作 DOM，可以用 `jsdom` 库模拟浏览器环境。

---

#### Q11 — 非 Node.js 内置模块 ❌ 答 D（实际正确，待核实）

> [!note] `dayjs` 是第三方库，需要通过 npm 安装。path/url/http 都是内置模块。

---

### 八、Vue 3

#### Q41 — onMounted vs mounted ❌ 答 D，正确 A

> **题目**：Vue 3 Composition API 中组件挂载后调用的钩子？
>
> > [!answer] Vue 3 **Composition API**（`<script setup>` / `setup()`）中使用 `onMounted()` 以函数形式调用。
> > Vue 2 Options API 中使用 `mounted: function() {}` 配置项形式。
> >
> > 两套 API 的区别：
> > ```js
> > // Vue 2 Options API
> > export default {
> >     mounted() { console.log('组件已挂载'); }
> > }
> >
> > // Vue 3 Composition API
> > import { onMounted } from 'vue';
> > onMounted(() => { console.log('组件已挂载'); });
> > ```

---

#### Q95 — script setup 错误说法 ❌ 答 D，正确 C

> **题目**：关于 `<script setup>` 的说法错误的是？
>
> > [!answer] `<script setup>` **不需要 return**。它会自动暴露顶层绑定（变量、函数），因此 C 说"需要使用 return 暴露数据"是错误的。
> >
> > ```html
> > <script setup>
> > import { ref } from 'vue';
> >
> > const count = ref(0);          // ✅ 自动暴露，模板中可直接用 count
> > const increment = () => count.value++; // ✅ 自动暴露
> > // ❌ 不需要 return { count, increment }
> > </script>
> > ```

---

#### Q102 — reactive 解构导致响应式失效 ❌ 答 A，正确 B

> **题目**：哪种情况可能导致响应式失效？
>
> > [!warning] **reactive 对象解构会丢失响应性！**
> >
> > ```js
> > const state = reactive({ count: 0, name: 'vue' });
> >
> > // ❌ 解构后 count 是普通 number，不再响应
> > const { count } = state;
> > count++;  // ❌ 不会触发视图更新
> >
> > // ✅ 正确做法：用 toRef / toRefs
> > const count = toRef(state, 'count');
> > count.value++;  // ✅ 保持响应式
> > ```
> >
> > **原理**：解构时提取的是值的副本，断开了与 reactive Proxy 的联系。Object.assign 会触发 Proxy set trap，所以不受影响。

---

#### Q103 — Vue 生命周期顺序 ❌ 答 D，正确 B

> **题目**：父子组件 mounted 执行顺序？
>
> > [!answer] **子组件先 mounted，父组件后 mounted。**
> >
> > ```mermaid
> > flowchart TD
> >     A["父组件 setup"] --> B["子组件 setup"]
> >     B --> C["子组件 render + mount"]
> >     C --> D["子组件 onMounted 🔔"]
> >     D --> E["父组件 render + mount"]
> >     E --> F["父组件 onMounted 🔔"]
> >
> >     style D fill:#4FC08D,color:#fff
> >     style F fill:#3B82F6,color:#fff
> > ```
> >
> > 记忆：**先子后代，先上后下**。

---

#### Q105 — Teleport ❌ 答 B，正确 C

> **题目**：关于 teleport 的正确理解？
>
> > [!answer]
> > - `teleport` 可以使用 `to` prop 动态禁用（`<Teleport :to="disabled ? '#default' : '#modal'" />`）✅
> > - 传送的内容**保持**与原组件的数据绑定 ❌（A 说只能传 body 是错的）
> > - 一个组件可以有多个 teleport ❌
> >
> > > [!tip] Teleport 本质
> > > Teleport 只是改变 DOM 的物理位置，组件的逻辑归属和数据绑定完全不变，就像"搬家但户口没变"。

---

#### Q101 — provide/inject 适用场景 ❌ 答 C，正确 B

> **题目**：何时用 provide/inject 比 props 更合适？
>
> > [!answer] 当**跨多层组件**（深嵌套）传递数据时，props drilling 会让中间层不得不透传 props，这时 provide/inject 可以直接从祖先注入到任意后代，跳过中间层。

---

#### Q96 — Koa 中间件执行顺序 ❌ 答 A（实际正确，待核实）

> [!note] Koa 中间件像洋葱圈模型：
>
> ```
> ┌─────────────────────────────┐
> │ middlewares in order:       │
> │ [1] → [3]                   │
> │          ...body...         │
> │ [4] ← [2]                   │
> └─────────────────────────────┘
> ```
> 输出：`1 → 3 → 4 → 2`（before next → after next）

---

### 九、React

#### Q68 — useEffect 只执行一次 ❌ 答 C，正确 A

> **题目**：useEffect 如何执行只运行一次的副作用？
>
> > [!answer] 传入空依赖数组 `[]`。这等价于 Class 组件的 `componentDidMount`。
> >
> > ```js
> > useEffect(() => {
> >     // 只在组件挂载时执行一次
> >     fetchData();
> > }, []); // ← 空数组 = 只在首次渲染后执行
> > ```

---

#### Q72 — 子传父方式 ❌ 答 D，正确 A

> **题目**：子传父在 React 中通常通过什么实现？
>
> > [!answer] **回调函数（Callback Props）**。父组件定义一个函数，通过 props 传给子组件，子组件调用该函数并携带数据。这是 React 单向数据流的核心模式。
>
> ```jsx
> // 父组件
> function Parent() {
>     const handleData = (childData) => console.log(childData);
>     return <Child onSend={handleData} />;
> }
>
> // 子组件
> function Child({ onSend }) {
>     return <button onClick={() => onSend('hello')} />;
> }
> ```

---

#### Q86 — Fragment 主要作用 ❌ 答 C，正确 D

> **题目**：Fragment 的主要作用？
>
> > [!answer] Fragment (`<>...</>`) 让组件返回多个子元素时**不添加额外 DOM 节点**。常用于表格 `<tr>`、列表项等对 DOM 层级有严格要求的场景。
> >
> > ```jsx
> > // 不用 Fragment —— 多一层 div
> > function Table() {
> >     return (<div><tr/><tr/></div>); // ❌ 不合法
> > }
>
> > // 用 Fragment —— 直接渲染子元素
> > function Table() {
> >     return (<><tr/><tr/></>); // ✅ 合法
> > }
> > ```

---

#### Q78 — useEffect 清理函数 ❌ 答 A，正确 C

> **题目**：关于 useEffect 清理函数的说法正确的是？
>
> > [!answer] 清理函数在**下次 effect 执行前**和**组件卸载时**都会执行。
> >
> > ```js
> > useEffect(() => {
> >     const timer = setInterval(() => {}, 1000);
> >
> >     // 清理函数
> >     return () => clearInterval(timer);
> >     // ↑ 在下次 effect 执行前 + 组件卸载时 都会执行
> > }, [dep]); // dep 变化时也会触发清理
> > ```

---

#### Q79 — 自定义 Hook ❌ 答 B，正确 A

> **题目**：关于自定义 Hook 的说法正确的是？
>
> > [!answer] 自定义 Hook **必须以 `use` 开头命名**。这样 React 才能在编译时识别它是一个 Hook，并应用 Hook 规则（不能在条件语句或循环中使用）。自定义 Hook 只能在函数组件或其他 Hook 中调用，**不能在类组件中使用**。

---

#### Q80 — props 特性 ❌ 答 C，正确 B

> **题目**：组件的 props 特性是？
>
> > [!answer] props 是**只读的（不可变）**。这是 React 单项数据流的基石——父组件控制 props，子组件只能读取不能修改。如需更新，父组件应通过 state 变化重新传递新值。

---

#### Q82 — 路由根组件 ❌ 答 A，正确 B

> **题目**：包裹整个应用路由的根组件？
>
> > [!answer] `BrowserRouter`（React Router v6）包装整个应用，监听 URL 变化并提供路由上下文。v5 中叫 `Router`。

---

#### Q90 — React Router 核心原理 ❌ 答 A，正确 C

> **题目**：React Router 基于哪种机制？
>
> > [!answer] **URL 变化监听 + 组件映射**。Browser History API（`popstate` 事件）监听 URL 变化，然后将当前路径与 Route 配置进行匹配，渲染对应的组件。

---

#### Q91 — 编程式导航钩子 ❌ 答 D，正确 A

> **题目**：编程式导航使用的钩子？
>
> > [!answer] `useNavigate()`。返回一个 navigate 函数，可用于按钮点击等交互场景中跳转。
> >
> > ```js
> > import { useNavigate } from 'react-router-dom';
> >
> > function MyButton() {
> >     const navigate = useNavigate();
> >     return <button onClick={() => navigate('/dashboard')}>Go</button>;
> > }
> > ```

---

#### Q107 — Context 中如何修改 theme ❌ 答 D，正确 B

> **题目**：Child 中如何修改 theme？
>
> > [!answer] 需要将 `setTheme` 也通过 Context 传递下去，或者在 Provider 中把 `[theme, setTheme]` 一起作为 value 传递。
> >
> > ```jsx
> > <ThemeContext.Provider value={{ theme, setTheme }}>
> >     <Child />
> > </ThemeContext.Provider>
> >
> > // Child 中
> > const { theme, setTheme } = useContext(ThemeContext);
> > // ✅ 可以通过 setTheme 修改
> > ```

---

#### Q108 — 自定义 Hook 的问题 ❌ 答 B（实际正确，待核实）

> [!note] Hook 内的 fetch 不在 useEffect 中包裹，每次渲染都会重新发起请求。正确写法应使用 `useEffect`。

---

#### Q109 — 直接 push 数组更新状态 ❌ 答 A，正确 B

> **题目**：`list.push(4); setList(list);` 会发生什么？
>
> > [!warning] **React State 是不可变的！**
> >
> > ```js
> > list.push(4);     // 原地修改数组
> > setList(list);    // 传给 React 的还是同一个引用
> > // React 做浅比较发现引用相同 → 不会重渲染
> > ```
> >
> > **正确写法：**
> > ```js
> > setList([...list, 4]);              // 方案1：展开新数组
> > setList(prev => prev.concat(4));    // 方案2：函数式更新
> > ```

---

### 十、ESM & CommonJS

#### Q92 — CommonJS 导出语法 ❌ 答 D，正确 B

> **题目**：以下哪种导出语法属于 CommonJS 规范？
>
> > [!answer] `exports.name = 'John';` 是 CommonJS 的命名导出写法。CommonJS 用 `module.exports` / `exports` 导出，用 `require()` 导入。
> >
> > ```js
> > // CommonJS
> > exports.name = 'John';
> > module.exports = { name };
> > require('./module');
> >
> > // ESM（现代标准）
> > export const name = 'John';
> > export default function() {};
> > import { name } from './module';
> > ```

---

#### Q99 — ESM 会报错的导出 ❌ 答 B，正确 C

> **题目**：以下哪种导出方式在 ESM 中会报错？
>
> > [!answer] `export = { a: 1 }` 是 TypeScript 的语法，不是 ESM 标准语法。ESM 不支持 `export =`。
> >
> > ESM 的标准导出：
> > ```js
> > export default 42;                    // 默认导出
> > export const a = 1, b = 2;           // 具名导出（一行多变量）
> > export * from './module';            // 全部重新导出
> > ```

---

### 十一、其他高频考点速查

#### Q3 — 解决跨域 ❌ 答 D（实际正确，待核实）

> [!note] axios 本身不具备跨域能力，jsonp/server cors/server proxy 才是真正的跨域方案。

---

#### Q4 — 终止 xhr 请求 ❌ 答 A，正确 D

> **题目**：可以终止请求的 XHR 函数？
>
> > [!answer] `xhr.abort()`。调用后立即停止请求，触发 `onerror` 和 `ontimeout`。
> >
> > ```js
> > const xhr = new XMLHttpRequest();
> > xhr.open('GET', '/api/data');
> > xhr.send();
> > // ... 需要时
> > xhr.abort(); // 终止请求
> > ```

---

#### Q8 — Git 提交前缀 ❌ 答 C（实际正确，待核实）

> [!note] `perf` 表示性能优化的修复。常用前缀：feat（新功能）、fix（bug 修复）、perf（性能优化）、refactor（重构）、docs（文档）、test（测试）。

---

#### Q15 — AJAX 核心对象（重复题）❌ 答 C（实际正确，待核实）

> [!note] 与 Q5 完全相同的题目，考察 XMLHttpRequest 全称。

---

#### Q18 — readyState === 3 ❌ 答 B（实际正确，待核实）

> [!note] `readyState` 四个状态值：0 未初始化、1 已打开、2 已发送、**3 交互中（接收响应中）**、4 完成。3 表示正在接收服务器响应数据，但尚未完成。

---

#### Q20 — CSS 选择器优先级 ❌ 答 D，正确 A

> **题目**：哪种写法或选择器优先级最高？
>
> > [!answer] `inline style`（行间样式）优先级高于 id、class、标签选择器。
> >
> > 优先级排序（从小到大）：
> > `标签选择器 < ID 选择器 < Class 选择器 < 内联样式 < !important`
>
> ```css
> div.box #myId { /* 101 */ }
> .box { /* 10 */ }
> div { /* 1 */ }
> style="color:red"   {/* 1000 —— 内联样式优先 */}
> ```

---

#### Q21 — apply vs call ❌ 答 A（实际正确，待核实）

> [!note] apply 接收参数数组，call 接收逐个参数。

---

#### Q22 — 比较运算符 ❌ 答 C，正确 A

> **题目**：`2 == '2'` 的结果？
>
> > [!answer] `==` 会做类型转换再比较：`Number('2') === 2` → `true`。
> > `===` 不做类型转换：`2 !== '2'`（number ≠ string）→ `false`。
> >
> > 完整输出：`false, true, true, true, false`

---

#### Q25 — 函数返回值 ❌ 答 C（实际正确，待核实）

> [!note] return 后的语句不再执行，但函数可以不写 return（此时返回 undefined），break 只能在循环/switch 中使用。

---

#### Q26 — 选择第一个类名为 box 的元素 ❌ 答 C（实际正确，待核实）

> [!note] `querySelector('.box')` 用 CSS 选择器语法，点号 `.` 表示类名。

---

#### Q39 — 跨域 HTTP 头部 ❌ 答 A（实际正确，待核实）

> [!note] `Access-Control-Allow-Origin: *` 是 CORS 核心响应头。

---

#### Q42 — computed 创建计算属性 ❌ 答 A（实际正确，待核实）

> [!note] Vue 的 computed 用于创建缓存的计算属性。

---

#### Q45 — provide/inject 用途 ❌ 答 D，正确 B

> **题目**：provide 和 inject 用于什么？
>
> > [!answer] 跨组件通信（包括跨层级父子/兄弟/隔代组件）。它们在祖先组件 provide 数据，后代组件 inject 获取，无需逐级传递 props。注意 B 中"事件总线"表述不准确，更准确说是"依赖注入式跨组件通信"。

---

#### Q46 — v-bind 指令 ❌ 答 D，正确 A

> [!note] `v-bind` 用于动态绑定元素属性，简写为 `:`。

---

#### Q47 — Whistle 启动命令 ❌ 答 C（实际正确，待核实）

> [!note] Whistle 代理工具启动命令：`w2 start`。

---

#### Q48 — npm 包存放目录 ❌ 答 C（实际正确，待核实）

> [!note] NPM 安装的包存放在 `node_modules/` 目录下。

---

#### Q50 — FormData.append ❌ 答 C，正确 A

> **题目**：FormData 中添加键值对的方法？
>
> > [!answer] `formData.append(key, value)`。这是 FormData 对象的唯一添加方法。
> >
> > ```js
> > const fd = new FormData();
> > fd.append('username', 'alice');
> > fd.append('avatar', fileInput.files[0]); // 也可以添加 File/Blob
> >
> > fetch('/upload', { method: 'POST', body: fd });
> > // 自动设置 Content-Type 为 multipart/form-data
> > ```

---

#### Q53 — HTTP 404 ❌ 答 B（实际正确，待核实）

> [!note] 404 = Not Found，请求的资源不存在。

---

#### Q54 — Webpack devtool ❌ 答 A，正确 B

> **题目**：devtool 配置选项的作用？
>
> > [!answer] **源代码映射（Source Map）**。它将打包后的代码映射回原始源代码，方便调试。常用值：`source-map`（完整）、`cheap-module-source-map`（开发快）、`eval`（最快）。
> >
> > ```js
> > // webpack.config.js
> > module.exports = {
> >     devtool: 'source-map', // 生成独立的 .map 文件
> > };
> > ```

---

#### Q55 — Webpack externals ❌ 答 D，正确 A

> **题目**：externals 配置用于什么？
>
> > [!answer] **定义外部依赖**。告诉 Webpack 某些模块不应打包进 bundle，而是从外部（如 CDN）引入。
> >
> > ```js
> > module.exports = {
> >     externals: {
> >         jquery: 'jQuery',  // import $ from 'jquery' → 使用 window.jQuery
> >     },
> > };
> > ```

---

#### Q56 — Webpack 代码分割 ❌ 答 B，正确 A

> **题目**：Webpack 如何处理代码分割？
>
> > [!answer] 通过 `optimization.splitChunks` 配置。它可以将 node_modules 中的公共代码和大型模块拆分为独立的 chunk 文件，减少首屏加载体积。
> >
> > ```js
> > optimization: {
> >     splitChunks: {
> >         chunks: 'all',  // 对所有 chunk 进行拆分
> >         cacheGroups: {
> >             vendors: { test: /[\\/]node_modules[\\/], name: 'vendors' }
> >         }
> >     }
> > }
> > ```

---

#### Q57 — module.exports ❌ 答 A（实际正确，待核实）

> [!note] 导出模块的公共接口。

---

#### Q58 — Node.js 定义 ❌ 答 B（实际正确，待核实）

> [!note] Node.js 是服务端 JavaScript 运行时环境。

---

#### Q59 — 文件上传编码类型 ❌ 答 A（实际正确，待核实）

> [!note] `enctype="multipart/form-data"` 是文件上传必需的编码类型。

---

#### Q60 — NPM 配置文件 ❌ 答 A（实际正确，待核实）

> [!note] `package.json` 管理项目依赖和配置。

---

#### Q61 — 受控 vs 非受控 ❌ 答 D，正确 A

> **题目**：受控组件和非受控组件的区别？
>
> > [!answer]
> > - **受控组件**：表单值由 React state 管理，通过 `value` 属性和 `onChange` 事件控制
> > - **非受控组件**：表单值由 DOM 自身管理，通过 `useRef` 获取值
> >
> > ```jsx
> > // 受控组件
> > function ControlledInput() {
> >     const [value, setValue] = useState('');
> >     return <input value={value} onChange={e => setValue(e.target.value)} />;
> > }
>
> > // 非受控组件
> > function UncontrolledInput() {
> >     const inputRef = useRef(null);
> >     return <input ref={inputRef} defaultValue="" />;
> > }
> > ```

---

#### Q62 — useState 用途 ❌ 答 A（实际正确，待核实）

> [!note] 定义组件的本地状态。

---

#### Q63 — ESM 导入重命名 ❌ 答 A（实际正确，待核实）

> [!note] `import { originalName as newName }` 是标准语法。

---

#### Q64 — ESM 默认导入 ❌ 答 B（实际正确，待核实）

> [!note] `import defaultExport from 'module'`。

---

#### Q65 — Webpack resolve ❌ 答 B，正确 A

> **题目**：resolve 配置选项用于什么？
>
> > [!answer] **解析模块的路径**。例如配置别名、文件扩展名自动补全等。
> >
> > ```js
> > resolve: {
> >     alias: { '@': path.resolve(__dirname, 'src') },
> >     extensions: ['.js', '.jsx', '.ts', '.tsx'],
> > }
> > ```

---

#### Q66 — Webpack optimization ❌ 答 B，正确 C

> **题目**：optimization 配置主要用于什么？
>
> > [!answer] **优化打包后的文件**。包括代码压缩、Tree Shaking、Code Splitting 等。

---

#### Q67 — useEffect 清除副作用 ❌ 答 A（实际正确，待核实）

> [!note] 返回清理函数即可清除副作用。

---

#### Q69 — useEffect 主要用途 ❌ 答 A（实际正确，待核实）

> [!note] 声明式地处理组件的副作用（数据获取、订阅、DOM 操作等）。

---

#### Q70 — React.memo 优化 ❌ 答 A（实际正确，待核实）

> [!note] 通过浅比较 props 避免不必要的渲染。

---

#### Q71 — 状态的不可变性 ❌ 答 A（实际正确，待核实）

> [!note] 状态不能被直接修改，必须创建新值。

---

#### Q74 — 父传子数据传递 ❌ 答 B（实际正确，待核实）

> [!note] props 是 React 中父组件向子组件传递数据的主要方式。

---

#### Q75 — key 的最佳实践 ❌ 答 B（实际正确，待核实）

> [!note] 使用列表项的唯一标识（如数据库 id），不要用 index。

---

#### Q76 — React 组件定义方式 ❌ 答 B（实际正确，待核实）

> [!note] 函数组件和类组件都可以。

---

#### Q77 — useCallback 作用 ❌ 答 B，正确 A

> **题目**：useCallback 的主要作用？
>
> > [!answer] **缓存函数引用**，避免因每次渲染产生新函数引用而导致子组件（React.memo 包裹的）不必要的重渲染。
> >
> > ```jsx
> > const memoizedFn = useCallback(() => {
> >     doSomething(a, b);
> > }, [a, b]); // a 或 b 变化时才创建新函数
> > ```

---

#### Q83 — React Context 错误说法 ❌ 答 D（实际正确，待核实）

> [!note] Context 可以与类组件配合使用（通过 Consumer 或 contextType）。

---

#### Q84 — 触发重渲染的因素 ❌ 答 D，正确 A

> **题目**：哪项会触发组件的重渲染？
>
> > [!answer]
> > - **A 正确**：父组件状态变化会触发父组件及所有子组件重渲染（无论 props 是否变化）
> > - B 不会：React.memo 且 props 未变化 → 跳过渲染
> > - C 不会：setState 传入相同值 → React 内部跳过
> > - D 不会：useRef 变化 → 不触发重渲染（ref 是可变的但不引起渲染）

---

#### Q85 — React.memo 的正确场景 ❌ 答 D，正确 B

> **题目**：使用 React.memo 的正确场景？
>
> > [!answer] **避免函数组件因 props 变化导致的不必要重渲染**。适用于 props 稳定、渲染开销大的场景。不适用于类组件，也不替代 useCallback。

---

#### Q87 — children props 目的 ❌ 答 C（实际正确，待核实）

> [!note] 向子组件传递可渲染内容。

---

#### Q88 — Redux 适用场景 ❌ 答 A（实际正确，待核实）

> [!note] 多个不相关组件共享复杂状态。

---

#### Q89 — 兄弟组件通信 ❌ 答 B（实际正确，待核实）

> [!note] 通过共同的父组件中转数据（状态提升）。

---

#### Q93 — React 性能优化手段 ❌ 答 C（实际正确，待核实）

> [!note] useMemo 缓存计算结果 + useCallback 缓存函数引用，两者都是性能优化手段。

---

#### Q94 — useEffect([]) 等价生命周期 ❌ 答 D，正确 A

> **题目**：useEffect 依赖为 `[]` 相当于哪个生命周期？
>
> > [!answer] `componentDidMount`。空数组意味着只在组件挂载后执行一次。

---

#### Q97 — React 单项数据流 ❌ 答 B（实际正确，待核实）

> [!note] 数据只能从父流向子，子不能直接改父的数据。

---

#### Q98 — 浏览器原生模块系统 ❌ 答 B（实际正确，待核实）

> [!note] ESM 是浏览器原生支持的模块化方案（`<script type="module">`）。

---

#### Q104 — LLM 核心原理 ❌ 答 B（实际正确，待核实）

> [!note] LLM 对下一个 token 做最大似然预测（Next Token Prediction）。

---

## 知识点总结

### 高频错题知识图谱

```mermaid
mindmap
    root((前端摸考<br/>27 道错题))
        事件处理
            preventDefault vs stopPropagation
            event delegation this vs target
            stopPropagation spelling
        JS核心
            原始类型 vs 引用类型
            传值 vs 传引用
            closure 闭包
            type coercion
            TypeError causes
        异步执行
            Event Loop 优先级
            宏任务 vs 微任务
            var 闭包陷阱
        Vue3
            reactive 解构陷阱
            script setup 自动暴露
            mounted 执行顺序
            provide/inject vs props
            Teleport
        React
            不可变 State
            callback props 子传父
            Fragment 零 DOM
            useEffect 清理时机
            custom Hook 命名规则
        HTTP网络
            4xx 状态码区别
            Content-Type
            CORS header
        构建工具
            Webpack 三大配置
            ESM vs CommonJS
        CSS
            继承性
            getComputedStyle
            选择器优先级
```

---

## 关联笔记

- [[hhs/REACT/README]]
- [[hhs/REACT/2. Hooks 篇/05-核心 Hooks]]
- [[hhs/REACT/2. Hooks 篇/06-性能优化 Hooks]]
- [[hhs/REACT/2. Hooks 篇/07-自定义 Hooks]]
- [[hhs/REACT/4. 进阶篇/11-组件通信模式]]
- [[hhs/REACT/3. 生态工具篇/08-路由管理]]