原生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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 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笔试题
2009/08/04 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
js+css在交互上的应用
2010/07/18 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
Highcharts入门之简介
2016/08/02 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
JS实现留言板功能
2017/06/17 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
js实现点击烟花特效
2020/10/14 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
Python基于template实现字符串替换
2020/11/27 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
敬老院献爱心活动总结
2014/07/08 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
工会积极分子个人总结
2015/03/03 职场文书
数学复习课教学反思
2016/02/18 职场文书
《将心比心》教学反思
2016/02/23 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
Python的这些库,你知道多少?
2021/06/09 Python
5道关于python基础 while循环练习题
2021/11/27 Python