原生JavaScript创建不可变对象的方法简单示例

 更新时间:2020年05月07日 11:49:18   作者:杜尼卜  
这篇文章主要介绍了原生JavaScript创建不可变对象的方法,结合简单实例形式分析了基于原生JavaScript创建不可变对象的相关原理、实现方法与操作注意事项,需要的朋友可以参考下

本文实例讲述了原生JavaScript创建不可变对象的方法。分享给大家供大家参考,具体如下:

Javascript是一种灵活的语言,你可以重新定义任何东西,但是当项目变得复杂时,我们会发现可变数据结构的问题。随着JavaScript的最新版本的发布这种情况发生了改变。现在可以创建不可变的对象了。本文介绍如何用三种不同的方法来做。

对象的不变性意味着我们不希望对象在创建后即以任何方式更改(将它们设置为只读类型)。

假设我们需要定义一个 car 对象,并在整个项目中使用它的属性来执行操作。我们不能允许错误地修改任何数据。

const myTesla = {
 maxSpeed: 155,
 batteryLife: 300,
 weight: 2300
};

Object.preventExtensions() 防止扩展

此方法可防止向现有对象添加新属性,preventExtensions() 是不可逆的操作,我们永远不能再向对象添加额外的属性。

Object.isExtensible(myTesla); // true
Object.preventExtensions(myTesla);
Object.isExtensible(myTesla); // false
myTesla.color = 'blue';
console.log(myTesla.color) // undefined

Object.seal() 密封

它可以防止添加或删除属性,seal() 还可以防止修改属性描述符。

Object.isSealed(myTesla); // false
Object.seal(myTesla);
Object.isSealed(myTesla); // true

myTesla.color = 'blue';
console.log(myTesla.color); // undefined

delete myTesla.batteryLife; // false
console.log(myTesla.batteryLife); // 300

Object.defineProperty(myTesla, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife

Object.freeze() 冻结

它的作用与 Object.seal() 相同,而且它使属性不可写。

Object.isFrozen(myTesla); // false
Object.freeze(myTesla);
Object.isFrozen(myTesla); // true

myTesla.color = 'blue';
console.log(myTesla.color); // undefined

delete myTesla.batteryLife;
console.log(myTesla.batteryLife); // 300

Object.defineProperty(myTesla, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife

myTesla.batteryLife = 400;
console.log(myTesla.batteryLife); // 300

提示

如果希望在尝试修改不可变对象时抛出错误,请使用严格模式。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • Bootstrap每天必学之进度条

    Bootstrap每天必学之进度条

    Bootstrap每天必学之进度条,对Bootstrap进度条小编也了解的很少,希望通过这篇文章和大家更多的去学习Bootstrap进度条,从中得到收获。
    2015-11-11
  • 经典面试题之JavaScript for循环(var let)

    经典面试题之JavaScript for循环(var let)

    如果你也在面试找工作,那么也一定遇到过这道for循环打印结果的题,下面我们来探讨下,对经典面试题之js for循环相关知识感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 如何实现表格中行点击时的渐扩效果!

    如何实现表格中行点击时的渐扩效果!

    如何实现表格中行点击时的渐扩效果!...
    2007-01-01
  • 微信小程序自定义模态框

    微信小程序自定义模态框

    这篇文章主要为大家详细介绍了微信小程序自定义模态框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript 字符串与数组转换函数[不用split与join]

    JavaScript 字符串与数组转换函数[不用split与join]

    下面的代码,不考虑他的运行效率的话,思路不错,大家可以看看,但在实际的应用中,我们仍然使用split或join来实现数组的操作。
    2009-12-12
  • typescript中声明合并介绍

    typescript中声明合并介绍

    这篇文章主要介绍了typescript中声明合并介绍,类型合并表明编译器将合并两个分开的并且名称相同的声明,合并之后的声明拥有两个声明的特点,任意数量的声明可以被合并,不仅限两个,更多相关内容需要的朋友可以参考下面文章内容
    2022-09-09
  • 微信小程序支付PHP代码

    微信小程序支付PHP代码

    这篇文章主要为大家详细介绍了微信小程序支付的PHP实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 原生JavaScript实现弹幕组件的示例代码

    原生JavaScript实现弹幕组件的示例代码

    这篇文章主要介绍了原生JavaScript实现弹幕组件的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 在bootstrap中实现轮播图实例代码

    在bootstrap中实现轮播图实例代码

    Bootstrap中轮播图插件叫作Carousel ,下面通过本文给大家详细介绍了bootstrop中实现轮播图效果,需要的朋友参考下
    2017-06-06
  • 兼容最新firefox、chrome和IE的javascript图片预览实现代码

    兼容最新firefox、chrome和IE的javascript图片预览实现代码

    这篇文章主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下
    2014-08-08

最新评论