浅谈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 相关文章推荐
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
javascript网页随机点名实现过程解析
Oct 15 Javascript
React Fragment介绍与使用详解
Nov 11 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 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
js压缩利器
2007/02/20 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Django框架 querySet功能解析
2019/09/04 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
python如何运行js语句
2020/09/09 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
在C#中如何实现多态
2014/07/02 面试题
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
网络教育自我鉴定
2014/02/04 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
学雷锋宣传标语
2014/06/25 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
培训讲师开场白
2015/06/01 职场文书