原生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入门教程(2) JS基础知识
Jan 31 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 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
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
python list语法学习(带例子)
2013/11/01 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
分析python切片原理和方法
2017/12/19 Python
Python中修改字符串的四种方法
2018/11/02 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python实现随机漫步方法和原理
2019/06/10 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python脚本第一行如何写
2020/08/30 Python
python空元组在all中返回结果详解
2020/12/15 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
学生安全责任书
2014/04/15 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
户外活动总结
2015/02/04 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA