快活林资源网

浅谈JS如何实现真正的对象常量
网络编程 2025/1/12 佚名
3 1
快活林资源网 Design By www.csstdc.com

前言

众所周知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如何实现真正的对象常量就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com