• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

ES2015(ES6) web前端中文站 2年前 (2017-10-10) 708次浏览 未收录 0个评论

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

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

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

你可以轻松地改变它:

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

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

第一次尝试

让我们实用 const !

 const obj = { ... }

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

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

继续尝试:Object.freeze()

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

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

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

最终解决方案

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

 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 = 5; obj.obj = { content: "changed!" }  console.log(obj);  // { //     num: 10, //     obj: { //         content: "mutable object" //     } // }

结论

让我们来看看这个新特性的实际支持情况:caniuse freeze?。绝大多数的现代浏览器都已经支持。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:JavaScript 中的不可变对象(Immutable Objects)
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址