JavaScript 的 Object.freeze 与 Object.seal 在限制对象修改时有何不同?

Object.seal禁止增删属性但可修改值,Object.freeze则完全锁定对象;两者均为浅冻结,嵌套对象需递归处理。

javascript 的 object.freeze 与 object.seal 在限制对象修改时有何不同?

Object.freeze 和 Object.seal 都用于限制对象的修改,但它们的作用程度不同。理解两者的区别有助于在需要控制对象可变性时做出合适选择。

Object.seal:禁止添加或删除属性

调用 Object.seal(obj) 后,对象的属性无法被添加或删除,但已有属性的值仍可修改。属性的描述符(如 writable、configurable)也会受到限制。

不能添加新属性 不能删除已有属性 可以修改已有属性的值(前提是 writable: true) 不能将属性从 configurable 变为不可配置(configurable 会被设为 false)例如:

const obj = { name: "Alice" };Object.seal(obj);obj.name = "Bob";        // ✅ 允许obj.age = 25;            // ❌ 无效(非严格模式下静默失败)delete obj.name;         // ❌ 无效

Object.freeze:完全冻结对象

Object.freeze(obj) 比 seal 更严格。它不仅禁止增删属性,还禁止修改任何已有属性的值。

不能添加新属性 不能删除已有属性 不能修改已有属性的值(即使 writable: true,也无法更改) 所有属性变为不可写(writable: false)例如:

const obj = { name: "Alice" };Object.freeze(obj);obj.name = "Bob";        // ❌ 无效(严格模式报错)obj.age = 25;            // ❌ 无效delete obj.name;         // ❌ 无效

两者都不处理深层对象

需要注意的是,seal 和 freeze 都是浅操作。如果对象的属性是引用类型(如对象或数组),其嵌套内容仍可能被修改。

立即学习“Java免费学习笔记(深入)”;

const obj = { user: { name: "Alice" } };Object.freeze(obj);obj.user.name = "Bob";   // ✅ 成功!内部对象未被冻结

若要彻底冻结,需递归调用 freeze 或使用深冻结工具函数。

基本上就这些。seal 保留属性可写性,freeze 则全面锁定。根据需求选择即可。

以上就是JavaScript 的 Object.freeze 与 Object.seal 在限制对象修改时有何不同?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1522971.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 15:30:41
下一篇 2025年12月20日 15:30:55

相关推荐

  • React组件性能优化:深入理解React.memo如何避免不必要的重渲染

    本文深入探讨React应用中常见的性能瓶颈——组件不必要的重渲染问题。通过一个具体案例,我们详细解析了父组件状态更新如何导致子组件冗余渲染,并重点讲解了如何利用React.memo这一高阶组件,结合其浅比较机制,有效阻止子组件在props未改变时进行重复渲染,从而显著提升应用性能和用户体验。 1. …

    2025年12月20日
    000
  • JavaScript 的标签模板字面量在构建 DSL 或 SQL 查询中有何妙用?

    标签模板通过函数处理字符串,分离静态部分与变量,自动转义防止SQL注入,支持DSL构建、类型提示、语法高亮及嵌套组合,提升安全性与可维护性。 标签模板字用函数处理模板字符串,让 DSL 和 SQL 构建更安全、直观。它把静态部分和变量分离,便于校验、转义和拼接。 自动转义防止注入 写 SQL 时直接…

    2025年12月20日
    000
  • JavaScript中的代码生成(AST)技术有哪些应用?

    AST技术通过解析代码为树形结构,实现代码转换(如Babel、TypeScript)、静态分析(如ESLint)、构建优化(如Vue、Webpack)和自动化生成,支撑现代JavaScript工程化。 JavaScript中的代码生成技术,通常基于抽象语法树(AST),在现代开发中有着广泛而深入的应…

    2025年12月20日
    000
  • 根据匹配的键值对从一个数组中筛选并返回另一个数组

    本教程旨在演示如何根据一个数组中元素的匹配值,从另一个包含对象的数组中筛选并提取特定属性。我们将探讨使用JavaScript的forEach、find、filter和map等方法实现此功能的多种策略,并提供代码示例及性能考量,帮助开发者高效处理数据筛选任务。 问题阐述 在前端开发中,我们经常需要处理…

    2025年12月20日
    000
  • JavaScript 动态菜单:实现点击选中与颜色切换的优雅方案

    本教程将指导您如何使用 JavaScript 实现一个动态菜单,当用户点击某个菜单项时,该项背景色变为绿色,而其他菜单项恢复白色。我们将采用事件委托和状态管理技术,提供高效、简洁且易于维护的解决方案,避免传统循环遍历的性能开销,并确保功能在任意点击顺序下都能正常工作。 1. 理解动态菜单的交互需求 …

    2025年12月20日
    000
  • 正确地在HTML中调用JavaScript函数以实现动态内容加载

    本文旨在指导开发者如何在HTML文档中正确地调用JavaScript函数,以实现页面内容的动态加载和更新。我们将详细解析在HTML标签上直接使用onload属性的常见误区,特别是针对非全局事件属性的元素,并推荐使用DOMContentLoaded事件监听器作为更健壮、更专业的解决方案,同时提供清晰的…

    2025年12月20日
    000
  • Axios下载Google Docs文件404错误解析与版本升级指南

    本文旨在解决使用Axios下载Google Docs文件时出现的404错误。尽管文件存在且链接有效,Axios仍可能返回404状态码。通过深入分析,我们发现此问题通常源于Axios库版本过旧。本教程将详细阐述如何通过升级Axios版本来有效解决这一兼容性问题,确保文件下载顺利进行。 问题概述:Axi…

    2025年12月20日
    000
  • 如何用JavaScript实现一个虚拟DOM(Virtual DOM)库?

    先创建虚拟节点并渲染为真实DOM,再通过diff算法比对新旧虚拟节点,最小化更新真实DOM。 实现一个简易的虚拟DOM库,核心是把真实DOM的变化过程抽象成JavaScript对象操作,再通过比对前后差异(diff)最小化更新真实DOM。下面是一个基础但完整的虚拟DOM库实现思路和代码示例。 创建虚…

    2025年12月20日
    000
  • JavaScript中根据数组长度条件性设置计数器值

    本教程旨在解决JavaScript数组映射操作中,根据数组长度动态设置计数器值的特定需求。当数组长度恰好为1时,我们将演示如何将计数器值设置为0,而在其他情况下则保留实际数组长度。文章将通过三元运算符和条件语句提供简洁高效的解决方案,并包含详细示例和注意事项。 在javascript开发中,我们经常…

    2025年12月20日
    000
  • JavaScript动态菜单项点击选中与颜色切换教程

    本教程将指导您如何使用JavaScript实现动态菜单项的点击选中效果,即点击某个菜单项时,将其背景色设置为绿色,同时将其他所有菜单项的背景色恢复为白色。我们将采用事件委托和状态管理的优化方法,避免复杂且低效的遍历操作,确保无论点击顺序如何,功能都能稳定运行,提供流畅的用户体验。 1. 引言:动态菜…

    好文分享 2025年12月20日
    000
  • 如何用WebXR API构建沉浸式虚拟现实体验?

    答案:构建沉浸式WebXR体验需确保浏览器支持并启用HTTPS,通过navigator.xr检查VR会话兼容性,绑定用户触发事件启动immersive-vr会话,结合Three.js等库建立渲染循环,利用requestAnimationFrame逐帧更新双目视图,获取XRFrame中的姿态数据同步摄…

    2025年12月20日
    000
  • Axios下载Google Docs文件404错误:版本更新的解决方案

    本文探讨了在使用Axios从Google Docs下载文件时遇到的404错误,即使文件存在且可直接访问。通过分析错误日志和实际解决方案,发现该问题通常是由于Axios库版本过旧导致的。文章提供了详细的Axios配置示例,并强调了保持库版本更新的重要性,以避免兼容性问题和未预期的请求失败。 1. 问题…

    2025年12月20日
    000
  • HTML元素加载时调用JavaScript函数的正确方法与最佳实践

    本文旨在解决在HTML元素加载时执行JavaScript函数的常见误区,特别是关于onload属性的使用限制。我们将深入探讨为何article等特定元素不支持onload,并介绍两种推荐的、更健壮的替代方案:利用DOMContentLoaded事件监听器进行页面内容操作,以及在特定场景下使用内联脚本…

    2025年12月20日
    000
  • JavaScript中的类型转换机制有哪些设计缺陷?

    JavaScript类型转换因隐式规则复杂易引发问题,1. ==比较逻辑混乱,如0==”、’n’==0均为true,应使用===避免;2. 布尔转换中’false’、[]、{}均为true,需注意假值陷阱;3. +操作符在数字与字符串间歧义…

    2025年12月20日
    000
  • JavaScript中的位运算符在性能优化中如何应用?

    位运算符在JavaScript中通过操作二进制提升性能,适用于取整、乘除优化、奇偶判断、标志位管理等场景,尤其在高频计算和底层逻辑中仍具优势。 JavaScript中的位运算符常被忽视,但在特定场景下能有效提升性能。它们直接操作数字的二进制表示,执行速度通常快于常规数学或逻辑操作。虽然现代JavaS…

    2025年12月20日
    000
  • CSS 选择器误用导致 animationend 事件失效的排查与解决

    本文深入探讨了 animationend 事件在动态生成元素上不触发的常见原因,特别是 CSS 选择器定位错误。通过分析一个在 JavaScript 中动态创建 img 标签并为其添加动画监听器的案例,详细解释了原始 CSS 规则为何未能正确应用动画,并提供了修正后的 CSS 选择器,确保动画事件能…

    2025年12月20日
    000
  • Nuxt i18n 动态路由的 localePath() 正确使用指南

    本教程旨在解决 Nuxt 3 项目中 localePath() 函数在处理国际化动态路由时遇到的常见问题。我们将详细讲解如何正确配置 i18n.config.js 中的动态路由(从 _id 到 [id]),以及如何在 或编程式导航中利用 localePath() 结合路由名称和参数,确保国际化链接的…

    2025年12月20日
    000
  • 实现鼠标悬停播放YouTube视频并离开时暂停的教程

    本文详细介绍了如何使用YouTube IFrame Player API实现网页上的视频缩略图交互功能。通过监听鼠标悬停和离开事件,我们能动态加载并播放YouTube视频,并在鼠标移开时准确暂停或销毁播放器,从而优化用户体验和资源管理。教程涵盖了API加载、播放器实例化、事件处理及关键的暂停与销毁机…

    2025年12月20日
    000
  • 如何利用浏览器开发者工具深入调试JavaScript内存问题?

    首先使用Chrome DevTools的Memory面板记录内存分配时间线,观察曲线是否持续上升以判断内存泄漏;接着在操作前后捕获堆快照并对比差异,重点查看新增对象和Detached DOM trees;然后通过Retaining tree分析阻止回收的引用链,结合Dominators视图识别大对象…

    2025年12月20日
    000
  • 如何实现一个JavaScript的动画库,支持缓动函数?

    答案:实现轻量级JavaScript动画库需基于requestAnimationFrame,通过记录开始时间、计算时间比例并应用缓动函数来更新属性。1. 构建animate函数,接收持续时间、缓动函数、更新及完成回调;2. 在每一帧中计算已过时间比例,使用缓动函数处理后调用onUpdate更新状态;…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信