默认情况下,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. javaScript中Math内置对象基本方法入门

    概念 Math 是javaScript的内置对象,包含了部分数学常数属性和数学函数方法. Math 不是一个函数对象,用户Number类型进行使用,不支持BigInt. Math 的所有属性与方法都是 ...

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

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

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

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

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

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

随机推荐

  1. Linux 基础——ls 命令

    第二天,继续学习Linux命令... 一.查看文件和目录列表的命令 ls:显示当前目录下的文件和目录,但是不会显示隐藏的文件和目录. ls -a:显示当前目录下的所有文件和目录. ls -l:显示当前 ...

  2. 前端组件化-Web Components【转】

    以下全部转自:http://www.cnblogs.com/pqjwyn/p/7401918.html 前端组件化的痛点在前端组件化横行的今天,确实极大的提升了开发效率.不过有一个问题不得不被重视,拟 ...

  3. cookie笔记(二)

    小荔枝 增 删 查 改 <form action="javascript:void(0)" method="get" accept-charset=&qu ...

  4. MySQL常用的数学函数

    在使用mysql自带的函数要慎重,说是会影响数据执行效率,代价太大.这个也要区分开,区分快软件的引用范畴,比如说内部系统业务逻辑比较复杂,功能点很细,但是并发量不是很大,这个时候用MySQL自带的函数 ...

  5. mvc controller放目录里面该怎么办?

    方法一,可以在目录中命名一个和目录同样名字的controller,然后用特性来进行设置,比如: Controllers/myfolder/myfolderController.cs 我建立了上述结构, ...

  6. 《深入理解Android2》读书笔记(五)

    接上篇<深入理解Android2>读书笔记(四) startActivity Am void run() throws RemoteException { try { printMessa ...

  7. B/S、C/S模式介绍

    1.B/S模式 B/S(Browser/Server,浏览器/服务器)方式的网络结构. ①.客户端统一采用浏览器如:Netscape和IE,通过Web浏览器向Web服务器提出请求,由Web服务器对数据 ...

  8. Oracle实例,具体运用

    Oracle关键字的使用 使用insert 添加数据: INSERT  INTO  表名  VALUES  (加入对应的数); COMMIT; INSERT INTO p_emp VALUES('TO ...

  9. 【java回调】同步/异步回调机制的原理和使用方法

    回调(callback)在我们做工程过程中经常会使用到,今天想整理一下回调的原理和使用方法. 回调的原理可以简单理解为:A发送消息给B,B处理完后告诉A处理结果.再简单点就是A调用B,B调用A. 那么 ...

  10. 【C++】函数缺省参数的作用

    用法:void func(int param1, int param2 = 1, int param = 3) {} func(10); //等同于func(10, 1 , 3) func(10,8) ...