原生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 相关文章推荐
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
浅谈vue的第一个commit分析
Jun 08 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
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程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
jQuery 3.0十大新特性
2016/07/06 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
运动会开幕式解说词
2014/02/05 职场文书
保护野生动物倡议书
2014/05/16 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
长城导游词400字
2015/01/30 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
导游词之包公祠
2019/11/25 职场文书