浅谈JS如何实现真正的对象常量


Posted in Javascript onJune 25, 2017

前言

众所周知ES6新增的const关键字可以用来声明常量,但是它只对基本数据类型生效(Number、String、Boolean等),那如果我们想声明一个常量对象呢?该如何实现,Object内置对象早就替我们想到了,下面来具体看一下

正题

一、先来看一下const方式来声明基本类型常量

代码:

const name = 'jack'
 name = 'lucy'  // 修改name常量

运行结果:

浅谈JS如何实现真正的对象常量

可以看到,控制台报错了,所以基本类型常量一旦声明复制,就不能在被修改

二、再来用const方式来声明复杂类型常量(即对象常量)

代码:

const Obj = {
 name: 'jack'
}

Obj.name = 'lucy' // 修改属性
Obj.age = 23 // 扩展属性
console.log(Obj.name)
console.log(Obj.age)

delete Obj.age
console.log(Obj.age) // 删除属性

Obj = {

 name: 'sam'
}

运行结果:

浅谈JS如何实现真正的对象常量

结果表明:对象常量只是不允许修改引用地址,但是属性还是可以被修改、扩展和删除的

要想得到一个真正的对象常量,我们无非要做的就是以下三点:

1.对象的属性不得被扩展

2.对象的属性不得被删除
3.对象的属性不得被修改

(1) 首先,如何做的对象属性不会被扩展呢?我们可以用Object.preventExtensions方法做到这一点

代码:

var Obj = {
 name: 'jack'
}

Object.preventExtensions(Obj)

Obj.age = 23 // 扩展属性
console.log(Obj.age) // undefined(说明扩展失败了)

运行结果:

浅谈JS如何实现真正的对象常量

(2) 接着,扩展的问题解决了,那如何实现属性不会被删除呢?不必担心,我们有Object.seal方法,该方法不仅可以保证对象的属性不会被扩展,而且还能防止属性被删除

代码:

var Obj = {
 name: 'jack'
}

Object.seal(Obj)

Obj.age = 23 // 扩展属性
console.log(Obj.age) // undefined(说明扩展失败了)

delete Obj.name // 删除属性
console.log(Obj.name) // 'jack'(说明删除失败了)

运行结果:

浅谈JS如何实现真正的对象常量

(3) 扩展和删除的问题都已经得到了解决,就剩下属性不得被修改的问题了,那么我们清楚终极Boss:Object.freeze,它可以做的对象既不可被扩展和删除,而且还不被修改

代码:

var Obj = {
 name: 'jack'
}

Object.freeze(Obj)

Obj.age = 23 // 扩展属性
console.log(Obj.age) // undefined(说明扩展失败了)

delete Obj.name // 删除属性
console.log(Obj.name) // 'jack'(说明删除失败了)

Obj.name = 'lucy' // 修改属性
console.log(Obj.name) // 'jack'(说明修改失败)

运行截图:

浅谈JS如何实现真正的对象常量

/***************************分割线*******************************/

以上就是一步步的演示如何实现一个真正的对象常量,但是有如下两个问题:

1.如果我们调用了这三个方法中的任何一个,然后我们再去做它们所禁止的行为(preventExtensions禁止扩展属性,seal禁止删除属性,freeze禁止修改属性),那么,如果在严格模式下,程序会报错,所以我们要谨慎使用

2.Object.freeze虽然实现了真正的对象常量,但是它的一切操作只在顶级对象属性上生效,下面的代码说明了这一问题

代码:

var Obj = {
 name: 'jack',

 extraInfo: {


 age: 23

 }
}

Object.freeze(Obj)

Obj.extraInfo.age = 80
console.log(Obj.extraInfo.age)
// 80

运行截图:

浅谈JS如何实现真正的对象常量

所以要想真正实现常量对象,我们需要以树的形式把对象的子孙对象都freeze,Object.freeze和递归可以解决该问题

// constantize实现递归freeze
var constantize = (obj) => {
 Object.freeze(obj);

 Object.keys(obj).forEach( (key, i) => {

 
 if ( typeof obj[key] === 'object' ) {

 
 
constantize( obj[key] );


 }

 });
}

var Obj = {

 name: 'jack',

 extraInfo: {

 
 age: 23

 }
}

constantize(Obj)

Obj.extraInfo.age = 80
console.log(Obj.extraInfo.age)  // 23

结语

以上就是常量对象的一些知识点,日常开发中,我们可以引入对象常量这个概念,来配置默认参数对象或一些配置信息,使我们的代码更加严谨

这篇浅谈JS如何实现真正的对象常量就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
js取整数、取余数的方法
May 11 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
JavaScript实现缓动动画
Nov 25 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 #Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 #Javascript
jQuery实现拖动效果的实例代码
Jun 25 #jQuery
JS检测window.open打开的窗口是否关闭
Jun 25 #Javascript
jQuery validata插件实现方法
Jun 25 #jQuery
简单谈谈axios中的get,post方法
Jun 25 #Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 #jQuery
You might like
PHP编实现程动态图像的创建代码
2008/09/28 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
Python中zip函数如何使用
2020/06/04 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
HTML文本属性&颜色控制属性的实现
2019/12/17 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
学雷锋标语
2014/06/25 职场文书
新闻编辑求职信
2014/07/13 职场文书
工作保证书怎么写
2015/02/28 职场文书
小学生读书笔记范文
2015/06/30 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书