浅谈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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
Angular5.1新功能分享
Dec 21 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
php生成curl命令行的方法
2015/12/14 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Pytorch之finetune使用详解
2020/01/18 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Python extract及contains方法代码实例
2020/09/11 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
行政专员的岗位职责
2014/03/10 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
初中数学教学随笔
2015/08/15 职场文书