JavaScript 中的不可变对象(Immutable Objects)

时间:2022-08-22 16:35:33

  默认情况下,JavaScript 中的对象是可变的。我们可以更改原始值(字符串,数字等)和对象。我们来看看这个对象:

let obj = {
num: ,
obj: {
content: "mutable object"
}
}

  你可以轻松地改变它:

obj.num = ;
obj.obj = { content: "changed!" } console.log(obj); // {
// num: 5,
// obj: {
// content: "changed!"
// }
// }

  非常明确是吧?那么,我们有什么办法使对象不可变呢?

1、让我们试用 const !

  很好的尝试,但是不起作用。如果你尝试一下,你会发现:这种办法根本就不起作用。const 关键字只是修改了某个变量名和其值之间的链接,而不是实际值。您仍然可以像上面所做的那样在 const 对象中更改这两个原始值和对象。例如:

const obj = {
num: ,
obj: {
content: "mutable object"
}
} obj.num = ;
obj.obj = { content: "changed!" } console.log(obj); // {
// num: 5,
// obj: {
// content: "changed!"
// }
// }

2、继续尝试:Object.freeze()。

  有很多关于 ES2015 新特性的文章和讨论。我们知道 ES2015 比 ES5 更好。例如,我们可以使用一个Object 方法来实现我们的目的:Object.freeze()。该方法使对象的原始属性不可变。我们把这个方法应用到我们原来的 obj 对象上:

Object.freeze(obj);
obj.num = ;
obj.obj = { content: "changed!" } console.log(obj); // {
// num: 10,
// obj: {
// content: "changed!"
// }
// }

  结果比原先的尝试稍后好一点,原始值现在已经修复,不可更改,但是我们仍然可以更改嵌套对象。

3、最终解决方案

  为了使对象完全不可变,我们还需要freeze()所有的嵌套对象。例如:

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

  使用这个函数,现在我们可以创建完全不可变的对象:

deepFreeze(obj);
obj.num = ;
obj.obj = { content: "changed!" } console.log(obj); // {
// num: 10,
// obj: {
// content: "mutable object"
// }
// }

总结:

  采用递归freeze()所有嵌套对象

JavaScript 中的不可变对象(Immutable Objects)的更多相关文章

  1. python、javascript中的不可变对象

    比如python中str是不变对象,而list是可变对象,javascript中str也是不变对象,而array是可变对象 python的例子: >>> a = 'abc' > ...

  2. 深入理解Java中的不可变对象

    深入理解Java中的不可变对象 不可变对象想必大部分朋友都不陌生,大家在平时写代码的过程中100%会使用到不可变对象,比如最常见的String对象.包装器对象等,那么到底为何Java语言要这么设计,真 ...

  3. javascript中遇到的字符串对象处理

    在javascript中对参数处理: 1 <script> 2 function getParam() 3 { 4 urlInfo=window.location.href; //获取当前 ...

  4. javascript中的内置对象

    2015.12.1 javascript中的内置对象 复习: 1.js中的内置函数 alert prompt write parseInt parseFloat eval isNaN document ...

  5. (转载)JavaScript中的Window窗口对象

    (转载)http://www.ijavascript.cn/jiaocheng/javascript-window-65.html 例子: <html> <head> < ...

  6. Python中的不可变对象类型与可变对象类型

    https://blog.csdn.net/answer3lin/article/details/86430074 其实各个标准资料中没有说明Python有值类型和引用类型的分类,这个分类一般是C++ ...

  7. javascript中的内置对象和数据结构

    目录 简介 基础类型 undefined Boolean和Boolean对象 Number和BigInt String Symbol null Object Function Date Array K ...

  8. 深入理解Javascript中构造函数和原型对象的区别

    在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...

  9. JavaScript中的原型和对象机制

    1.对象相关的一些语言特性 JavaScript里所有的东西都是对象, 对象是属性的集合.要知道,函数也是对象, 能够作为变量的值. 返回值. 参数或者属性的值. 函数对象特殊的地方是能通过&quot ...

随机推荐

  1. Android 开发基础及环境配置

    2011年买了第一部安卓操作系统的手机,当时势头正盛的HTC不可思议(incredible),当时的想法就是想学习下智能手机开发,但是由于各种原因,客观上是公司的项目太忙了,忙于项目管理.团队建设.客 ...

  2. mysql 简单优化方法

    优化步骤:1.查看SQL是否可以优化.2.查看索引是否可以优化.3.查看表结构是否可以优化. show table status from databases like 'tablename%'; / ...

  3. AngularJS的date 过滤器

    date 过滤器可以将日期格式化成需要的格式.AngularJS中内置了几种日期格式,如果没有指定使用任何格式,默认会采用 mediumDate 格式,下面的例子中展示了这个格式. ·下面是内置的支持 ...

  4. ofstream的问题

    ofstream在多字节编码的项目中, 写入中文目录写不了, 英文目录可以 换成c库的fopen, fwrite可以

  5. 修改Intellij Idea 创建maven项目默认Java编译版本

    在使用Intellij Idea 创建Maven项目时,默认的Java Language是1.5,虽然可以在Project Structrue中修改,但是每次pom.xml文件有变化时,工程又会重置到 ...

  6. oracle使用LEFT JOIN关联产生的问题在查询结果中使用CASE WHEN 无法判断

    oracle使用LEFT JOIN关联产生的问题在查询结果中使用CASE WHEN 无法判断 查询方式一: SELECT CASE WHEN (SELECT CAST(SUM(CASE ) THEN ...

  7. Alpha 冲刺 (3&sol;10)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺3 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 组织第一次团队编程 继续阅读小程序开发文档 接下来的 ...

  8. Tensorflow 的saved&lowbar;model模块学习

    saved_model模块主要用于TensorFlow Serving.TF Serving是一个将训练好的模型部署至生产环境的系统,主要的优点在于可以保持Server端与API不变的情况下,部署新的 ...

  9. kettle判断是否是数据首行(第一行)

    可以用组件:分析查询(Analytic Query) 后面可以通过判断pre_id 是否为空值(null)判断.

  10. CefSharp&period;v49&period;0&period;1浏览器控件完全WPF版,实现禁止弹出新窗口,在同一窗口打开链接,并且支持带type&equals;&quot&semi;POST&quot&semi; target&equals;&quot&semi;&lowbar;blank&quot&semi;的链接

    需求场景:在查询页面,填写查询条件,查询条件包括上传的图片,根据图片的特征查询,这就需要在提交的时候,使用POST提交,因为GET提交无法提交图片数据,提交查询条件之后,在新的窗口展示查询结果.(当然 ...