默认情况下,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. Java学习笔记(十)——xml

    [前面的话] 学习过程中还是效率不够高,老是容易注意力不集中,着急啊.不能在这样了,要好好学习,好好努力. 学习过程中的小知识点总结,基础知识,选择阅读. [xml定义] 定义:可扩展标记语言(英语: ...

  2. CentOS7.5安裝配置多协议下载器Aria2

    一.搭建 Aria2 以及 AriaNg Web UI 使用Docker构建的Aria2 参考 aria2-ariang-docker 以及 aria2-ariang-x-docker-compose ...

  3. LR运行场景时出现的error

    LR运行场景时出现的error 1.Action.c(24): Error -27740: Overlapped transmission of request to "home.asiai ...

  4. react native native module

    React Native Native Modules,官方地址:https://facebook.github.io/react-native/docs/native-modules-android ...

  5. 三个通用的脚本,处理MySQL WorkBench导出表的JSON数据进SQLITE3

    一个通用的脚本,处理MySQL WorkBench导出表的JSON数据进SQLITE3,创建的是FTS4的虚拟表 # -*- coding:utf-8 -*- import json import s ...

  6. MFC获取句柄

    CWnd *pWnd = GetDlgItem(ID_***); // 取得控件的指针 HWND hwnd = pWnd->GetSafeHwnd(); // 取得控件的句柄

  7. php中网页生成图片的方式

    在网上找了很多方法,发现与自己最初的思路也是大同小异,那就是HTML——>PDF——>JPG.从上午9点钟一直搞到下午6点钟,代码方面其实很简单,更多的还是环境和PHP拓展上面,忙了一天的 ...

  8. 微信JSSDK分享功能实现

    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <scri ...

  9. Python3 文件读写r,w,a

    # Author;Tsukasa ''' f = open('yesterday','w') #文件句柄...注意open分为‘r’读模式,‘w’写模式(d会先创建文件或者覆盖文件),‘a’为追加模式 ...

  10. Shiro的认证原理(Subject#login的背后故事)

    登录操作一般都是我们触发的: Subject subject = SecurityUtils.getSubject(); AuthenticationToken authenticationToken ...