0

0

JavaScript如何用Object.seal防止对象扩展

幻夢星雲

幻夢星雲

发布时间:2025-07-13 14:58:02

|

998人浏览过

|

来源于php中文网

原创

object.seal() 用于阻止向对象添加新属性并标记现有属性为不可配置,但允许修改可写属性的值。1. 它固定对象结构,防止增删属性或修改属性特性;2. 允许修改已有属性的值(若属性可写);3. 不影响嵌套对象,需手动递归密封;4. 在严格模式下非法操作会抛出错误;5. 性能开销小,适合维护代码稳定性与安全性。

JavaScript如何用Object.seal防止对象扩展

Object.seal() 方法在 JavaScript 中是一个非常实用的工具,它能阻止你向一个现有对象添加新的属性,同时也将该对象的所有现有属性标记为不可配置(non-configurable)。这意味着你不能删除这些属性,也不能改变它们的可枚举性(enumerable)、可写性(writable)或可配置性(configurable)等特性。然而,需要注意的是,你仍然可以修改现有属性的值,只要它们是可写的。

JavaScript如何用Object.seal防止对象扩展

解决方案

当你需要一个对象在创建后,其结构(即有哪些属性)不被改变,但内部属性的值可能还需要更新时,Object.seal() 就派上用场了。它提供了一种介于完全开放和完全冻结之间的状态。

考虑这样一个场景,你有一个配置对象,它包含了一些默认设置,你希望这些设置的键名是固定的,不允许外部代码随意增删,但这些配置的值可能会根据用户输入或运行时状态而变化。

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

JavaScript如何用Object.seal防止对象扩展
const config = {
  appName: "MyAwesomeApp",
  version: "1.0.0",
  debugMode: false
};

Object.seal(config);

// 尝试添加新属性 - 失败 (在严格模式下会抛出 TypeError)
config.newFeature = true;
console.log(config.newFeature); // undefined

// 尝试删除现有属性 - 失败 (在严格模式下会抛出 TypeError)
delete config.version;
console.log(config.version); // "1.0.0"

// 尝试修改现有属性的值 - 成功
config.debugMode = true;
console.log(config.debugMode); // true

// 尝试修改属性的特性 - 失败
try {
  Object.defineProperty(config, 'appName', {
    writable: false
  });
} catch (e) {
  console.log("无法改变 appName 的 writable 特性:", e.message);
}

console.log(Object.isSealed(config)); // true

从上面的例子可以看出,一旦一个对象被 Object.seal() 密封,它的“骨架”就被固定下来了。你不能再给它添砖加瓦,也不能拆掉任何一块砖,但你可以重新粉刷已有的砖块。这对于维护代码的健壮性和可预测性非常有帮助,尤其是在模块化开发中,可以有效防止意外的副作用。

为什么我们需要密封对象?

在我看来,密封对象更多是一种防御性编程的策略,它关乎代码的可靠性和安全性。我们都知道 JavaScript 的对象是高度动态的,这意味着你可以在运行时随意增删属性,这既是它的灵活性所在,也常常是 Bug 的温床。

JavaScript如何用Object.seal防止对象扩展

想象一下,你开发了一个库,提供了一个配置对象给用户。如果你不希望用户不小心或恶意地往这个配置对象里塞入一些奇怪的属性,或者删掉一些关键的默认配置,那么 Object.seal() 就成了一个很好的屏障。它能强制执行一种契约:这个对象就长这样了,你只能修改它已有的内容,不能改变它的形状。这在团队协作中尤其重要,能够减少因为对象结构被意外修改而导致的问题。

此外,在某些特定的优化场景下,固定对象的结构理论上也能帮助 JavaScript 引擎更好地进行内部优化,因为它知道这个对象的形状不会再变了。不过,这通常是微乎其微的性能提升,我们更多是出于结构稳定的考虑来使用它。

PHP Apache和MySQL 网页开发初步
PHP Apache和MySQL 网页开发初步

本书全面介绍PHP脚本语言和MySOL数据库这两种目前最流行的开源软件,主要包括PHP和MySQL基本概念、PHP扩展与应用库、日期和时间功能、PHP数据对象扩展、PHP的mysqli扩展、MySQL 5的存储例程、解发器和视图等。本书帮助读者学习PHP编程语言和MySQL数据库服务器的最佳实践,了解如何创建数据库驱动的动态Web应用程序。

下载

Object.seal()Object.freeze()Object.preventExtensions() 有何不同?

这三者是 JavaScript 中用于控制对象可变性的三个核心方法,它们的功能递进,但经常让人混淆。我发现很多人在初学时,会把它们一股脑地归为“让对象不可变”,但实际上它们各自有明确的适用场景和不同的严格程度。

  1. Object.preventExtensions(): 这是最宽松的限制。

    • 作用: 阻止向对象添加新的属性。
    • 允许: 删除现有属性、修改现有属性的值、修改现有属性的特性(如 writableenumerableconfigurable)。
    • 何时用: 当你只关心对象的“宽度”(不希望增加新属性),但不介意其内部属性的增删改查时。
    const objPrevent = { a: 1 };
    Object.preventExtensions(objPrevent);
    objPrevent.b = 2; // 失败
    delete objPrevent.a; // 成功
    objPrevent.a = 10; // 成功
  2. Object.seal(): 比 preventExtensions 更进一步。

    • 作用: 阻止添加新属性,并将所有现有属性标记为不可配置(configurable: false)。
    • 允许: 修改现有属性的值(如果它们是可写的)。
    • 不允许: 删除现有属性、添加新属性、改变现有属性的特性。
    • 何时用: 当你希望对象的结构(有哪些属性)是固定的,但属性值可以更新时。
    const objSeal = { a: 1, b: 2 };
    Object.seal(objSeal);
    objSeal.c = 3; // 失败
    delete objSeal.a; // 失败
    objSeal.a = 10; // 成功
  3. Object.freeze(): 这是最严格的限制。

    • 作用: 阻止添加新属性,阻止删除现有属性,并将所有现有属性标记为不可配置(configurable: false)且不可写(writable: false)。
    • 允许: 什么都不允许!对象变得完全不可变(在顶层)。
    • 不允许: 添加新属性、删除现有属性、修改现有属性的值、修改现有属性的特性。
    • 何时用: 当你需要一个对象完全不可变,就像一个常量一样,任何部分都不能被修改时。
    const objFreeze = { a: 1, b: 2 };
    Object.freeze(objFreeze);
    objFreeze.c = 3; // 失败
    delete objFreeze.a; // 失败
    objFreeze.a = 10; // 失败

简而言之,preventExtensions 限制了“增”,seal 限制了“增”和“删改属性特性”,而 freeze 则限制了“增删改”所有操作。理解这些细微的差别对于选择正确的对象保护策略至关重要。

使用 Object.seal() 有哪些需要注意的地方和性能考量?

在使用 Object.seal() 时,有一些“坑”或者说需要特别留心的地方。最常见的一个误解就是关于“深层密封”的问题。

  1. 浅层密封(Shallow Seal): Object.seal()Object.freeze() 一样,都只作用于对象的顶层属性。这意味着如果你的对象中嵌套了其他对象,这些内部的嵌套对象并不会自动被密封。它们仍然可以被修改、扩展或删除属性。

    const nestedObj = {
      id: 1,
      details: {
        name: "Test",
        value: 100
      }
    };
    
    Object.seal(nestedObj);
    
    // 顶层属性不能添加或删除
    nestedObj.newProp = "nope"; // 失败
    delete nestedObj.id; // 失败
    
    // 但嵌套对象仍然是可变的!
    nestedObj.details.name = "Updated Test"; // 成功
    nestedObj.details.newDetail = "Can Add!"; // 成功
    console.log(nestedObj.details); // { name: 'Updated Test', value: 100, newDetail: 'Can Add!' }

    如果你需要对整个对象图进行密封,你必须递归地遍历所有嵌套对象并对它们分别调用 Object.seal()(或者 Object.freeze(),如果需要更严格的不可变性)。这通常需要一些额外的代码来实现深层密封或深层冻结。

  2. 严格模式下的行为: 在严格模式下("use strict";),尝试对一个已密封的对象执行不允许的操作(如添加新属性或删除现有属性)会抛出 TypeError。而在非严格模式下,这些操作会静默失败,不会抛出错误,这可能会导致一些难以追踪的 Bug。因此,我个人建议在编写这类防御性代码时,始终在严格模式下进行,这样能更早地发现问题。

  3. 性能考量: 对于大多数日常应用场景来说,Object.seal() 的性能开销可以忽略不计。现代 JavaScript 引擎在处理这些操作时都非常高效。事实上,通过固定对象的形状,有时甚至能帮助引擎进行内部优化,因为它不需要为对象形状的变化预留额外的空间或逻辑。所以,除非你在处理极其庞大且频繁操作的对象集合,并且已经通过性能分析确定 Object.seal() 是瓶颈,否则不应该过早地为此担心。它带来的代码结构稳定性和可预测性,其价值远超潜在的微小性能影响。

最后,你可以使用 Object.isSealed() 方法来检查一个对象是否已经被密封。这在调试或编写条件逻辑时非常有用。

const mySealedObject = {};
Object.seal(mySealedObject);
console.log(Object.isSealed(mySealedObject)); // true

const myNormalObject = {};
console.log(Object.isSealed(myNormalObject)); // false

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

557

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

754

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

478

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

454

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

1031

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

553

2023.09.20

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

1

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.9万人学习

Pandas 教程
Pandas 教程

共15课时 | 0.9万人学习

ASP 教程
ASP 教程

共34课时 | 3.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号