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


Posted in Javascript onMay 07, 2020

本文实例讲述了原生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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery实现视频展示效果
May 30 jQuery
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 #Javascript
基于javascript实现日历功能原理及代码实例
May 07 #Javascript
Vue简单实现原理详解
May 07 #Javascript
angular组件间通讯的实现方法示例
May 07 #Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 #Javascript
Vue双向绑定实现原理与方法详解
May 07 #Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 #Javascript
You might like
php文件上传的简单实例
2013/10/19 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
python网络应用开发知识点浅析
2019/05/28 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
金属材料工程个人求职的自我评价
2013/12/04 职场文书
高职教师岗位职责
2013/12/24 职场文书
护理专业自我鉴定
2014/01/30 职场文书
网站美工岗位职责
2014/04/02 职场文书
住宅质量保证书
2014/04/29 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
红色经典观后感
2015/06/18 职场文书
大学同学聚会感言
2015/07/30 职场文书
个人向公司借款协议书
2016/03/19 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
bat批处理之字符串操作的实现
2022/03/16 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android