ES6中对象冻结Object.freeze()的使用及注意事项

简介: ES6中对象冻结Object.freeze()的使用及注意事项

1.前言:


在正式进入正文前,先说下const

const 定义的是常量,且不能再修改,但是它只能对简单类型的数据生效,对于复杂类型就无效了(const保存的是引用地址),如果想冻结对象的话,那就可以使用今天介绍的对象冻结。

vue2中的Object.defineProperty() 注:(数据劫持)就是劫持的对象的属性,而今天的猪脚就是和他对着干的

2.为什么要用对象冻结 ?


在实际开发中,我们会需要一个真正常量对象:这个对象一经初始化,就不能被添加属性,删除属性,修改属性。

3 特点:


Object.freeze()方法可以冻结一个对象。具体来说冻结指的是:

•不能向这个对象添加新的属性

•不能修改其已有属性的值

•不能删除已有属性

•以及不能修改该对象已有属性的可枚举性、可配置性、可写性。

注意:这个方法返回值是你传入对象,而不是创建一个被冻结的副本,也就是说它直接修改了入参。

4.语法


1. Object.freeze(obj)
2. // obj要被冻结的对象。
3. // 返回值是被冻结的对象。

5.代码示例:


const constSettings = {
    appName:"fan",
    info: {p1:200,p2:300 }
};
Object.freeze(constSettings);
constSettings.appName = 1 ; 
// 悄悄地无效
constSettings.other = "abc"; 
// 悄悄地无效
constSettings.info.p1 = 100; 
// 生效了
console.info(constSettings)
// {appName:"fan",info:{p1:100,p2:300}

注意:

1.不需要额外定义一个常量来接收freeze()的返回值,写成 const obj = Object.freeze(constSettings) 。freeze()会直接修改入参。

2.添加other属性,修改appName 这两个操作均没有显示地报错误,但也没有修改成功。

3.仍可以以修改属性的属性:constSettings.info.p1 = 100; 原因是freeze()只能冻住一层。

6.核心注意点


只能冻结第一层,比如一个对象里面还有对象这种嵌套的形式,我们可以采用递归+Object.freeze()实现

6.1 代码实现示例:


function deepFreeze(obj) {
  // 取出所有属性
  var propNames = Object.getOwnPropertyNames(obj);
  // 在冻结自身之前冻结属性值
  propNames.forEach(function(name) {
    var prop = obj[name];
    // 如果prop是个对象,冻结它
    if (typeof prop == 'object' && prop !== null)
      deepFreeze(prop);
  });
  // 冻结自身(no-op if already frozen)
  return Object.freeze(obj);
}
const constSettings = {
    appName:"a",
    info: {p1:200,p2:300 }
};
deepFreeze(constSettings);
constSettings.appName = 1
// 悄悄地无效
constSettings.other = "abc" 
// 悄悄地无效
constSettings.info.p1 = 100 
// 也悄悄地无效
console.info(constSettings)
相关文章
|
2月前
|
存储 算法 Java
滚雪球学Java(42):探索对象的奥秘:解析Java中的Object类
【5月更文挑战第17天】🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!!
28 2
滚雪球学Java(42):探索对象的奥秘:解析Java中的Object类
|
5天前
|
存储 JSON JavaScript
JavaScript 魔法镜:透视对象Object与执行上下文的内在奥秘
JavaScript 魔法镜:透视对象Object与执行上下文的内在奥秘
|
24天前
|
Java 编译器 数据处理
JavaSE——面相对象高级一(4/4)-继承相关的注意事项:权限修饰符、单继承、Object类、方法重写、子类访问成员的特点......
JavaSE——面相对象高级一(4/4)-继承相关的注意事项:权限修饰符、单继承、Object类、方法重写、子类访问成员的特点......
29 0
|
2月前
|
算法 Java 测试技术
简介Object类+接口实例(深浅拷贝、对象数组排序)
简介Object类+接口实例(深浅拷贝、对象数组排序)
|
2月前
|
设计模式 Java API
【设计模式】JAVA Design Patterns——Active Object(活动对象设计模式)
【设计模式】JAVA Design Patterns——Active Object(活动对象设计模式)
|
2月前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`'1.2,2,3,4,5'`)转换为对象数组。通过使用`split(',')`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
|
2月前
|
存储 设计模式 Python
Python中的类(Class)和对象(Object)
Python中的类(Class)和对象(Object)
48 0
|
2月前
|
Java
Java Object 类
5月更文挑战第16天
|
14天前
|
Java
【Java】Object类简单解析
【Java】Object类简单解析
15 1
|
18天前
|
前端开发 JavaScript Java
Java基础10-深入理解Class类和Object类(二)
Java基础10-深入理解Class类和Object类(二)
21 5