全部文章
共 1299 篇文章
前端面试100题
前端面试 100 题 适用方向：中高级前端 / React / Vue / Next.js / Nuxt / TypeScript / 工程化 / 实时通信 / Electron / Node.js / AI 应用前端 使用方式：优先掌握“标准回答”，再练“面试官追问”，最后把“结合你的简历怎么答”组织成自己的项目故事。 说明 “结合你的简历怎么答”只使用你简历中已经出现的项目与技术事实。 “标准回答 / 追问”属于通用前端知识总结，用...
深入理解 JavaScript 原型与原型链：从关系图到核心逻辑 - heshanwan - 博客园
在 JavaScript 世界里， 原型（Prototype）和原型链（Prototype Chain） 是理解对象继承、属性查找机制的基石。很多开发者初学时对它们 “又爱又恨”，这篇文章将结合经典关系图，用通俗易懂的方式拆解原型与原型链的核心逻辑，帮你彻底掌握这套机制！ 一、先搞懂几个核心概念 在分析关系图前，先明确 JavaScript 中与原型相关的关键概念，避免后续混淆： 1\. 函数对象与普通对象 函数对象 ：由...
JavaScript 闭包
摘要 ：闭包（Closure）是 函数与其词法环境（Lexical Environment）的组合 ——一个函数可以"记住"并访问它被创建时所处的外部作用域中的变量，即使它在该作用域之外被执行。一句话记忆： 函数打包了出生地的变量，走到哪都能用 。核心要点：① 内部函数引用外部变量即形成闭包；② 闭包实现变量私有化/数据封装/柯里化；③ 潜在风险是内存泄漏和循环引用；④ 避免泄漏需手动解除引用和及时移除监听器。 一、什么是闭包 1.1...
this 指向与 call / apply / bind
第 1 段（10min）回顾与预习：为什么必须搞懂 this 1.1 先接昨日（闭包）的线 昨天你学了 闭包 。闭包解决的是"函数记住它定义时所在作用域里的变量"。 闭包回答的问题是： “这个函数能访问到哪些变量？” → 看定义位置（词法作用域）。 而今天的主角 回答的是一个完全不同的问题： “这个函数执行时，站在谁的角度说话？” → 看 调用位置 （谁调用的、怎么调用的）。 一句话概括两者的分工： 变量看 定义处 ， 看 调用处 。这...
事件循环与宏任务 / 微任务
第 1 段（10min）回顾与预习：接住昨天的线 1.1 先接昨日（原型链）的线 昨天你学了 对象怎么找属性 （沿原型链上溯）。今天换一个维度： 代码怎么排队执行 。 把前三天的知识串成一句话，你已经有了 JS 的三张地图： 1.2 先凭直觉回答 4 个小问题（不用对，先写下答案） 学完第 2、3、4 段再回来对照。第 1 段只做一件事：记住画面—— JS 单线程，但靠"排队 + 轮转"假装多线程 。 第 2 段（15min）知识块①：...
原型与原型链
第 1 段（10min）回顾与预习：接住昨天的线 1.1 先接昨日（this 与 new）的线 昨天你学了四种 this 绑定，其中 绑定 讲了 的四步： 今天的一切都从第 ② 步长出来 。 这个式子，昨天是"new 四步的副产品"，今天要把它彻底讲透。 再回忆昨天的一句话： 变量看定义处，this 看调用处 。今天补上第三句： 属性看原型链 。三句连起来： 变量 → 看定义处（闭包）； → 看调用处（绑定）；属性 → 看原型链（上溯查...
一、TypeScript与类型系统（20题）
1\. 在定义AI接口返回的嵌套数据结构（如多轮对话、工具调用结果）时，如何用TypeScript的泛型与条件类型实现灵活的类型推导？ 场景：为“AI助手”定义统一的消息类型系统，需兼容不同模型供应商（OpenAI/Anthropic）及内部（Moonshot）的返回格式。 核心答案： 构建一个以泛型为基础、条件类型为分支的层次化类型系统。核心是利用泛型参数化“消息内容”、“工具调用”和“提供商”，再通过条件类型精确匹配不同场景下的数据...
七、AI工程化与前端工具链（18题）
1. 如何设计一个AI前端项目的标准化目录结构 核心设计原则：模块化、关注点分离、可扩展性、易于维护。按功能领域组织代码，而非按技术类型。 目录结构设计： 关键设计决策： 1. 按功能模块组织而非技术类型，便于功能扩展 2. AI相关代码集中管理，便于模型切换和更新 3. 严格区分业务逻辑和通用逻辑 4. 测试文件靠近被测试代码，便于维护 2. 请设计一套AI前端代码规范 代码规范体系：建立编码规范、提交规范、命名规范三位一体的规范体系...
三、前端状态管理与数据流（21题）
1. 在大型AI应用中，如何用Zustand或Redux Toolkit管理多轮对话、生成任务、用户配置等复杂状态？ 场景：AI学习平台包含多个复杂功能：多轮AI对话、异步生成任务、用户个性化配置等，需要统一的状态管理方案。 Zustand方案：Zustand适合中小型应用，以更简洁的方式管理状态。 Redux Toolkit方案：更适合大型企业级应用，提供更严格的架构约束。 选择建议： Zustand：适合中小型项目，API简洁，学习...