原生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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
详解JavaScript函数对象
Nov 15 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
详解jQuery选择器
2016/12/21 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python多线程扫描端口代码示例
2018/02/09 Python
pandas中去除指定字符的实例
2018/05/18 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
python 实现IP子网计算
2021/02/18 Python
给女朋友的道歉信
2014/01/10 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
校庆活动策划方案
2014/06/05 职场文书
代办委托书怎么写
2014/08/01 职场文书
重阳节标语大全
2014/10/07 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
鼋头渚导游词
2015/02/05 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
CentOS安装Nginx并部署vue
2022/04/12 Servers
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js