原生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 相关文章推荐
JavaScript中合并数组的N种方法
Sep 16 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
Vue2.0 实现移动端图片上传功能
May 30 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
js抽奖转盘实现方法分析
May 16 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
SONY SRF-40W电路分析
2021/03/02 无线电
php缓存技术介绍
2006/11/25 PHP
php 购物车的例子
2009/05/04 PHP
PHP查询网站的PR值
2013/10/30 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
python中map的基本用法示例
2018/09/10 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
园林资料员岗位职责
2013/12/30 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
求职简历的自我评价
2014/01/31 职场文书
法人授权委托书
2014/04/03 职场文书
教师节演讲稿
2014/05/06 职场文书
法定代表人授权委托书
2014/09/19 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
八月一日观后感
2015/06/10 职场文书
法定代表人身份证明书
2015/06/18 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
浅析Django接口版本控制
2021/06/26 Python