原生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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
JS类的封装及实现代码
Dec 02 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
js的三种继承方式详解
Jan 21 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
vue之延时刷新实例
Nov 14 Javascript
js+canvas实现画板功能
Sep 13 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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
多文件上传的例子
2006/10/09 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php广告加载类用法实例
2014/09/23 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
PDO::_construct讲解
2019/01/27 PHP
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
Python模拟百度登录实例详解
2016/01/20 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python读取各种文件数据方法解析
2018/12/29 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python关于调用函数外的变量实例
2019/12/26 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
学雷锋月活动总结
2014/04/25 职场文书
减负增效提质方案
2014/05/23 职场文书
会议接待欢迎标语
2014/10/08 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers