2026最新const readonly高频面试题，5个核心考点吃透

看了一堆教程还是不会写项目？别怪教程，是你没搞懂底层逻辑。2026最新的前端面试风向标已经变了，HR和面试官不再只问“是什么”，而是盯着“为什么”和“边界情况”不放。特别是 const 和 readonly 这两个词，看似基础，实则暗坑无数。很多开发者在面试时自信满满地说“const是常量”，结果被追问“那你为什么还能改属性？”瞬间破防。今天这篇干货，咱们不整虚的，直接拆解大厂真题，带你把这两个高频考点彻底吃透。

考点梳理：混淆即淘汰

在JavaScript和TypeScript的面试中，const 和 readonly 的混淆率高达40%以上。面试官抛出这个问题，核心目的只有一个：验证你对“引用类型”与“值类型”在内存中存储机制的理解，以及你对类型系统（TypeScript）的掌握程度。

很多候选人的回答停留在“const不能重新赋值，readonly不能修改属性”这种表层定义。这种回答在初级岗位或许能过，但在中高级岗位面前，直接判定为“不合格”。

我们需要厘清三个核心维度：

1. 作用域语言：const 是 JavaScript/ES6 原生关键字，readonly 是 TypeScript 特有修饰符。
2. 约束对象：const 约束的是“变量绑定关系”，readonly 约束的是“属性可写性”。
3. 生效时机：const 在运行时生效，readonly 主要在编译时生效（运行时依赖 Object.freeze 等手动处理或框架支持）。

如果面试时被问到“const声明的对象，其属性可以被修改吗？”，答“不可以”就是典型的半吊子选手。正确答案应该是：const 保证的是变量指向的内存地址不变，但如果该地址存储的是对象或数组，其内部属性是可以被修改的。

标准答法：结构化表达

在面试现场，回答技术问题要有结构，不要东一句西一句。针对 const 和 readonly 的区别，建议采用“定义-机制-区别-场景”四步走策略。

第一步：明确定义 “const 是 ES6 引入的块级作用域声明关键字，用于声明只读变量引用。readonly 是 TypeScript 中的属性修饰符，用于声明对象属性的只读状态。”

第二步：阐述机制 “const 在运行时，将变量名与特定内存地址绑定。如果尝试重新赋值，引擎会抛出 TypeError。但对于对象类型，const 只锁定了地址，没锁定内容。readonly 则在编译阶段检查，任何对只读属性的赋值操作都会报编译错误。在运行时，TypeScript 类型会被擦除，readonly 本身不提供运行时保护，除非结合 Object.freeze 或使用支持运行时检查的框架。”

第三步：核心区别 “最大的区别在于作用层级。const 作用于变量声明，readonly 作用于对象属性。你可以用一个 const 声明一个 readonly 属性的对象，这是双重保险。”

第四步：应用场景 “在项目中，配置对象通常使用 const 声明，内部属性根据是否需要修改决定是否加 readonly。对于不可变数据结构，两者结合使用能最大化代码安全性。”

这种回答方式，既展示了对语言底层的理解，又体现了工程化的思维，面试官通常会给出高分。

代码实现：代码即真理

光说不练假把式，我们来看一段典型的面试题代码，并逐行拆解。

// 场景：定义一个用户配置对象，要求姓名不可变，地址可变interface UserConfig {readonly name: string;address: string;age: number;
}// 1. 使用 const 声明变量，绑定 UserConfig 类型
const user: UserConfig = {name: 'Alice',address: 'New York',age: 30
};// 2. 测试 const 的约束
// user = { name: 'Bob', address: 'London', age: 25 }; // ❌ 编译错误：不能给常量 'user' 赋值
// 运行时：TypeError: Assignment to constant variable.// 3. 测试 readonly 属性的约束
// user.name = 'Charlie'; // ❌ 编译错误：Cannot assign to 'name' because it is a read-only property.// 4. 测试非 readonly 属性
user.address = 'London'; // ✅ 允许，address 未标记为 readonly
user.age = 31;           // ✅ 允许// 5. 陷阱：const 对象内部属性修改
const config = {theme: 'dark',settings: {fontSize: 14}
};config.settings.fontSize = 16; // ✅ 允许！const 不递归锁定
// config.theme = 'light';    // ❌ 编译错误：如果 config 被推断为 readonly 或显式声明为 readonly 对象字面量类型// 6. 进阶：Deep Readonly
type DeepReadonly<T> = {readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};const deepConfig: DeepReadonly<{ a: { b: string } }> = { a: { b: 'hello' } };
// deepConfig.a.b = 'world'; // ❌ 编译错误

逐行讲解：

1. 接口定义：readonly name 表示 name 属性在类型层面是只读的。
2. 变量声明：const user 锁定了 user 这个变量不能指向新的对象。
3. 重新赋值错误：user = ... 会同时触发编译错误（TS）和运行时错误（JS），因为 const 禁止重新赋值。
4. 属性修改错误：user.name = ... 会触发编译错误，因为 name 是 readonly。但注意，如果这段代码运行在纯 JS 环境中（没有 TS 编译），这行代码不会报错，name 会被修改。这就是 readonly 的局限性。
5. 非只读属性：address 和 age 可以正常修改。
6. 嵌套对象陷阱：这是面试重灾区。const 和 readonly 默认都是浅层的。config.settings.fontSize 的修改是完全合法的。如果要递归锁定，必须使用 DeepReadonly 或 Object.freeze 递归处理。
7. Deep Readonly：这是 TypeScript 4.x+ 的常见考点，考察你对类型体操的理解。

追问与延伸：高手过招

当基础问题答完后，面试官通常会抛出追问，这时候就是拉开差距的时候。

追问1：const 声明的数组，可以 push 吗？ 答：可以。const arr = [1, 2, 3]; arr.push(4); 是合法的。const 只锁定了 arr 这个引用，没锁定数组长度和内容。如果面试官说“那怎么防止修改？”，你要回答：“使用 Object.freeze(arr) 可以冻结数组，但这是浅冻结，嵌套对象依然可以改。如果需要深度冻结，需要递归 freeze。”

追问2：TypeScript 中 readonly 属性，在运行时真的不可变吗？ 答：不真的。TypeScript 是静态类型语言，类型信息在编译后被擦除。readonly 只是给编译器看的，运行时它只是一个普通属性。如果直接操作 JS 代码，或者通过 any 类型绕过检查，都可以修改 readonly 属性。真正的运行时保护需要 Object.freeze 或 Object.defineProperty 配合。

追问3：const 和 let 在性能上有区别吗？ 答：在 V8 引擎等现代 JS 引擎中，const 和 let 的性能差异微乎其微，可以忽略不计。但在某些极端的循环场景中，const 可能因为变量不可变，引擎能更好地进行内联缓存优化。不过，这不是主要选择依据，代码可读性和安全性才是。

追问4：在 React 或 Vue 中，const 有什么特殊意义吗？ 答：在 React 中，函数组件必须使用函数声明或箭头函数，通常用 const 来定义组件，这是社区约定。因为 function 声明会提升，而 const 不会，但在模块化代码中，提升问题不大。更重要的是，const 强调组件引用的稳定性，符合 React 的纯函数理念。在 Vue 3 的 Composition API 中，const 用于声明 ref 和 reactive 对象，同样是为了避免意外重赋值。

追问5：如何生成一个真正的不可变对象？ 答：结合 Object.freeze 和递归。

function deepFreeze(obj) {if (obj === null || typeof obj !== 'object') {return obj;}Object.freeze(obj);Object.getOwnPropertyNames(obj).forEach((name) => {const prop = obj[name];if (prop && typeof prop === 'object' && !Object.isFrozen(prop)) {deepFreeze(prop);}});return obj;
}

这段代码在面试手写算法题中偶尔会出现，考察递归和对象遍历能力。

记忆口诀：考前速记

为了在紧张的面试中快速回忆起这些知识点，我总结了一个口诀：

Const 锁址不锁值， Readonly 锁属不锁址。 JS 运行看 Const， TS 编译看 Readonly。 浅层冻结有陷阱， 深层递归要深冻。 运行时擦除类型， Freeze 才是真保护。

解释一下：

• Const 锁址不锁值：const 锁定的是变量指向的内存地址，不是地址里的数据值（对于对象）。
• Readonly 锁属不锁址：readonly 锁定的是对象的属性，不锁定对象本身的引用。
• JS 运行看 Const：在纯 JS 环境中，只有 const 有运行时效力，readonly 不存在。
• TS 编译看 Readonly：在 TS 环境中，readonly 在编译期生效，提供类型安全。
• 浅层冻结有陷阱：默认的 const 和 readonly 都是浅层的，嵌套对象可改。
• 深层递归要深冻：需要不可变时，使用 DeepReadonly 类型或 deepFreeze 函数。
• 运行时擦除类型：TS 类型在运行时消失，readonly 无运行时保护。
• Freeze 才是真保护：Object.freeze 才是运行时真正的只读保障。

避坑指南：

1. 不要迷信 const：很多开发者以为用了 const 就是常量，结果在调试时发现对象属性被意外修改，排查半天。记住，const 不是 immutable。
2. 不要滥用 readonly：在 TS 中，如果对象需要部分属性可变，部分属性只读，合理标记 readonly 能提高代码可维护性。但全量 readonly 可能导致灵活性不足。
3. 注意 as const：TS 中有一个 as const 断言，可以将字面量类型固化。例如 const role = 'admin' as const;，这样 role 的类型就是 'admin' 而不是 string。这在处理枚举和配置时非常有用，也是近年来的高频考点。

真实案例分享：

在某大厂面试中，候选人答出了 const 和 readonly 的基本区别，但被追问“如果我要保证一个配置对象在运行时绝对不可变，该怎么做？”候选人卡壳了。我给出的建议是：先用 const 声明变量，再用 Object.freeze 冻结对象，如果是嵌套结构，写一个 deepFreeze 工具函数。这个回答不仅展示了语言知识，还展示了工程化解决问题的能力，最终拿到了 Offer。

官方文档细节：

根据 MDN Web Docs（官方文档）的描述，const 声明一个只读变量引用，该引用必须在其声明时初始化。对于对象，const 防止的是重新分配，而不是修改属性。TypeScript 官方文档则明确指出，readonly 属性只能在对象初始化时赋值，后续修改会导致编译错误，但运行时不保证不可变。这些细节在面试中提出来，会显得你非常严谨和靠谱。

结尾互动：

你在项目里踩过这个坑吗？比如用了 const 结果属性还是被改了，或者用了 readonly 结果在 JS 运行时居然能修改？评论区聊聊，看看有多少人中过招。如果是你，你会怎么在团队中规范使用 const 和 readonly？