浅谈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 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP session有效期问题
2009/04/26 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
js对象的比较
2011/02/26 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
token 机制和实现方式
2020/12/15 Javascript
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python2和python3哪个使用率高
2020/06/23 Python
python实现最短路径的实例方法
2020/07/19 Python
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
即兴演讲稿
2014/01/04 职场文书
应届生求职信
2014/05/31 职场文书
小学语文教研活动总结
2014/07/01 职场文书
岳麓书院导游词
2015/02/03 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
体育委员竞选稿
2015/11/21 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python