前端面试每日三题 - Day 13

这是我为准备前端/全栈开发工程师面试整理的第八天每日三题练习，涵盖 JavaScript 内存泄漏、React 状态提升与 prop drilling、以及高可用权限系统。每道题都配有详细解析和代码示例，助你真正掌握原理与实战技巧！

---

✅ 题目 1：JavaScript 中哪些操作容易导致内存泄漏？如何排查？

解析：

内存泄漏是指程序不再使用的内存无法被回收，常见场景包括：

常见内存泄漏场景：

• 闭包引用未释放
• 定时器未清除（setInterval）
• 未移除事件监听
• DOM 引用保存在全局变量中
• 缓存过度或使用 WeakMap 错误

️ 示例：

function leaky() {
  let data = new Array(1000000).fill("leak");
  return () => console.log(data);
}
const hold = leaky(); // data 被闭包持有，内存无法释放

排查技巧：

• 使用 Chrome DevTools 的 Memory -> Heap Snapshot
• Timeline 面板观察内存趋势
• 关键对象是否能 GC

脑图建议：

• 以“内存泄漏”为中心
  • 场景：闭包 / 事件 / setInterval / DOM 引用
  • 排查方式：DevTools、快照、监控趋势

---

✅ 题目 2：React 中状态提升与 prop drilling 的权衡与实践

解析：

状态提升（Lifting State Up）：将子组件共享的状态提升到最近的共同父组件。

prop drilling（属性穿透）：当状态或方法需要一层层向下传递时，可能会导致维护困难。

优势与问题：

方法	优点	问题
状态提升	保持状态单一源头	组件间耦合度增加
prop drilling	保持数据流明确	中间组件冗余传参，维护困难

应对方案：

• 使用 Context API 共享状态，避免过度 prop drilling
• 拆分组件结构，避免嵌套太深

示例代码：

// 父组件提升状态
function Parent() {
  const [count, setCount] = useState(0);
  return ;
}

function Child({ count, setCount }) {
  return  setCount(count + 1)}>{count};
}

脑图建议：

• 中心：React 状态共享
  • 状态提升 vs Prop drilling
  • 应用 Context API
  • 性能与维护权衡点

---

✅ 题目 3：如何设计一个高可用、可扩展的权限系统？

解析：

权限系统的本质是 控制用户是否能访问某资源或执行某操作，通常由以下几个核心组成：

权限模型：

• RBAC（基于角色的访问控制）
• ABAC（基于属性的访问控制）
• ACL（访问控制列表）

⚙️ 架构要素：

1. 用户-角色-权限的关联
2. 资源粒度划分：模块、页面、按钮级
3. 权限校验方式：前端路由守卫 + 后端接口鉴权

️ 示例模型（RBAC）：

User -> Role -> Permission -> Resource

后端接口鉴权示例：

function checkPermission(user, action) {
  const permissions = getPermissions(user.role);
  return permissions.includes(action);
}

脑图建议：

• 权限系统核心模块
  • 权限模型（RBAC/ACL/ABAC）
  • 授权链路（用户->角色->权限）
  • 实现方式（前后端协同）

---

今日总结

模块	知识点	关键技巧
JavaScript	内存泄漏	闭包引用、定时器未清、监听器未清除
React	状态共享	状态提升、prop drilling、Context API
系统设计	权限系统	RBAC 模型、前后端协作、接口鉴权

---

明日预告：

• JavaScript 原型继承与类的实现
• React 中自定义 Hook 的设计技巧
• 系统设计题：文件系统的目录树结构如何实现？

---

保持输入，保持好奇，真正掌握一项技能从深度思考开始。加油，未来架构师！