js常见面试题
JavaScript 的知识体系庞杂，面试题往往不仅考察你是否知道答案，更看重你是否理解其底层的运行机制。为了避免死记硬背，我们需要从 JavaScript 引擎的设计逻辑出发来解构这些常考点。 以下为你系统梳理的基础与高级核心考点、经典代…
1730 字6 分钟
前端开发 / jsObsidian
载入中...
载入中...
该分类下共收录了 34 篇文章
JavaScript 的知识体系庞杂，面试题往往不仅考察你是否知道答案，更看重你是否理解其底层的运行机制。为了避免死记硬背，我们需要从 JavaScript 引擎的设计逻辑出发来解构这些常考点。 以下为你系统梳理的基础与高级核心考点、经典代…
在前端开发中，处理引用数据类型（对象、数组）时，深拷贝是一个绕不开的核心概念。它的本质是在内存的堆区重新开辟一块空间，完整地复制目标对象及其所有嵌套的子对象，从而彻底切断与原对象的引用联系。 为了在不同业务场景中做出最合理的选择，我们可以将…
在 JavaScript 的世界里，Set 是一种非常纯粹的数据结构。如果说 Array（数组）是一个有顺序、允许重复的“购物清单”，那么 Set（集合）更像是一个具有排他性的“俱乐部”：它只在乎你“在不在”，而不在乎你在哪个位置，且绝不允…
为了彻底理清 JavaScript 的集合体系，我们需要从最底层的内存管理机制出发。无论是 Map 还是 Set，它们最核心的区别不在于 API 的好用程度，而在于它们如何与系统的垃圾回收（Garbage Collection, GC）对话…
理解 Promise 的核心在于理解它是一个状态机和回调队列的集合。为了达到“去粗取精”的效果，我们不需要实现完整的 Promises/A+ 规范（那过于冗长），而是抓住其并发控制和状态流转的本质逻辑。 以下是 Promise 最核心的几个…
在 JavaScript 中，报错（Error）不仅仅是程序的“罢工”，它是一套完整的对象体系。当代码运行出现问题时，JavaScript 引擎会根据问题的本质，抛出对应类型的错误对象。 这些错误都继承自基类 Error。理解它们能让你在调…
JavaScript 的 class 是一个非常精妙的“谎言”。 表面上，它让 JavaScript 看起来像 Java 或 C++ 这种基于类（Classbased）的语言，但其内核依然是那个自由、甚至有些“原始”的原型继承（Protot…
在 Web 开发中，MutationObserver 就像是一个潜伏在 DOM 树里的“私家侦探”。它不参与业务逻辑的直接执行，而是静静地观察你指定的 DOM 节点，一旦节点发生了增删、属性修改或文本变动，它就会立刻记录下来并执行你预设的回…
理解浏览器如何运作，核心在于区分“执行代码的工人”和“维持工厂运转的后台”。虽然 JavaScript 引擎（主线程）同一时间只能做一件事，但浏览器为其配备了数个独立线程来处理杂活。 我们可以将这些线程按功能进行分类梳理： 1. 计时器线…
要理解 targetNode.scrollTop = targetNode.scrollHeight 为什么能实现“滚动到底部”，我们需要先把 DOM 元素的几个“高度”属性拆解清楚。 简单来说，这行代码的逻辑是：将该容器可见区域的顶部，推…
好的，我们来彻底讲明白 async/await 的底层原理。 一句话概括：async/await 是基于 Promise 和 Generator 函数实现的语法糖，它通过事件循环（Event Loop）机制，让我们能用看似同步的代码风格来处…
好的，这是一个非常核心且有深度的 JavaScript 问题。我们不仅要实现这些功能，更重要的是理解其背后的逻辑和原理。 我会按照以下顺序为你手写实现并解释： 1. Promise.all：等待所有 Promise 都成功。 2.…
好的，我们来深入且系统地讲解 Object.create 函数，并梳理 Object 上的其他核心函数。 Object.create 的深入解析 Object.create 是一个非常基础且强大的方法，它允许我们创建一个新对象，并精确地指…
好的，我们来深入地探讨和实现 JavaScript 中的 call, apply, 和 bind。 这三者是 JavaScript 中非常重要的函数方法，核心作用都是改变函数执行时的 this 上下文。理解它们是掌握 JavaScript …
我们来系统且深入地探讨一下 JavaScript 的垃圾回收（Garbage Collection, GC）机制，并结合实际案例，说明如何利用这些知识来优化代码性能。 核心思想：为何需要垃圾回收？ 从第一性原理出发，程序运行的本质是处理数…
我们来系统且深入地探讨一下JavaScript大文件上传的处理方案。我会从问题的本质出发，详细讲解核心原理、实现步骤、关键代码，并分析各种方案的优劣，最后给出我的建议。 三、分片上传的详细实现步骤 下面我们来分解整个流程，包括前端和后端的…
这是一个非常核心且重要的问题。要彻底讲明白 JavaScript 中 Object {} 和 Map 的区别，我们需要从它们的设计哲学、内部机制和实际应用场景三个层面进行深入剖析。 这不仅仅是“Map 的键可以是任意类型”这么简单。 二、…
我们来彻底讲明白 JavaScript 中的 addEventListener。 这不仅仅是一个方法，它是现代 Web 交互的基石。理解它，意味着你理解了浏览器如何响应用户行为。 我们将从它是什么、为什么需要它，到它的每一个参数、底层的事件…
我们来彻底讲明白 requestAnimationFrame 通常简称为 rAF。 要真正理解它，我们不能只看它是什么，更要明白它为什么会出现，它解决了什么根本性的问题。 一、requestAnimationFrame 的诞生背景：旧时代…
我们来系统地梳理一下 JavaScript 中字符串（String）和数组（Array）的这些常用基础函数。 理解这两者差异的关键在于一个核心概念：字符串是不可变的（Immutable），而数组是可变的（Mutable）。记住这一点，很多函…
好的，这是一个非常核心的前端性能问题。我们从第一性原理出发，一步步拆解，彻底讲明白回流（Reflow）与重绘（Repaint），以及 React 是如何通过其 Diff 算法巧妙地管理这个过程的。 浏览器的渲染过程：一切的起点 要理解回流…
好的，我们来系统且深入地探讨一下 JavaScript 中的深拷贝。这不仅仅是“如何实现”的问题，更关键的是理解“为何如此实现”以及各种方法的优缺点和适用场景。 核心出发点：为什么需要深拷贝？ 要理解深拷贝（Deep Copy），必须先理…
我们来深入、彻底地探讨一下前端开发中常用的设计模式。 首先要明确一个核心思想：设计模式不是具体的技术，也不是必须遵守的强制规定，而是在特定场景下，针对反复出现的问题，经过验证的、优雅的、可复用的解决方案。在前端领域，随着应用复杂度的指数级增…
好的，我们来深入且系统地讲清楚 JavaScript 中三个最核心、也最容易混淆的概念：作用域 Scope、闭包 Closure 和 this。 这三者紧密相连，但解决的是不同的问题。理解它们的关键在于弄清楚它们各自的“规则”和“目的”。 …
好的，我们来深入探讨 export default {} 这行代码。 这行代码看起来很简单，但要理解它，需要把它拆成两部分来看：export default 和 {}，并结合 ES Module ESM 模块系统的规范来理解其底层实现。 …
好的，我们来系统且深入地讲清楚 JavaScript 的 Promise，从它的“是什么”、“为什么需要它”，到“如何使用”，最后再深入到它的“底层实现原理”。 二、如何使用 Promise？ 1. 创建 Promise 通过 new …
好的，我们来彻底讲清楚事件代理（Event Delegation）。 核心思想：一个生活中的比喻 想象一个公寓楼，里面住了100户人家。如果每个住户都自己去楼下信箱取快递，那就需要100个人频繁地上下楼。但更高效的方式是，快递员把所有快递…
好的，我们来彻底讲清楚 JavaScript 的事件循环（Event Loop）。这不仅仅是一个面试高频题，更是理解 JavaScript 异步编程、性能优化乃至整个语言运行机制的基石。 我会从“为什么需要它”这个第一性问题出发，逐步拆解它…
好的，我们来彻底讲清楚 JavaScript 中的原型 prototype 和原型链 prototype chain。 我会用一个尽量形象的方式，从根本原因讲起，让你不仅知道“是什么”，更理解“为什么是这样”。 2. 核心概念：原型 Pr…
好的，我们来深入探讨一下如何在 JavaScript 中从零开始实现一个双向数据绑定。 双向数据绑定，顾名思义，就是将数据（通常是一个 JavaScript 对象，我们称之为 Model）和视图（HTML 界面，我们称之为 View）进行绑…
实现一个 JavaScript 的异步模块定义（AMD）加载器是一个非常好的编程练习，它能让你深入理解模块化、依赖管理和异步编程的核心。 我们将从第一性原理出发，逐步构建一个简单但功能完备的 AMD 加载器。整个过程会分为几个核心步骤： 1…
好的，我们来深入探讨一下前端开发中的策略模式。 我会从它是什么、为什么需要它、以及如何在实际工作中运用它这几个方面，结合具体的代码示例来阐述我的理解。 核心理解：将“做什么”与“怎么做”分离开 想象一个场景：你在一个电商网站结算，可以选择…
JavaScript 实现继承主要依赖于原型链。虽然 ES5 和 ES6 在语法上有所不同，但底层机制都是基于原型。 ES6 中的继承 ES6 引入了 class 语法，这使得 JavaScript 的面向对象编程更接近于传统面向对象语言…
好的，我们来彻底讲清楚前端中的装饰者模式（Decorator Pattern）。 这是一种在软件设计中被广泛使用的结构型设计模式。它的核心思想是：在不改变原有对象结构的基础上，动态地给一个对象添加一些额外的职责（功能）。 为了真正理解它，我…