原生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控制图片等比例缩放的示例代码
Dec 24 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
Smarty模板快速入门
2007/01/04 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
php实现学生管理系统
2020/03/21 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
vant实现购物车功能
2020/06/29 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
Python标准库sched模块使用指南
2017/07/06 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
Python3+Appium安装使用教程
2019/07/05 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
轻松制作精彩视频:Animoto
2018/09/19 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
写好自荐信的技巧
2013/11/08 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js