ES6中对象冻结Object.freeze()的使用及注意事项 您所在的位置:网站首页 世界第一解冻人成功了吗 ES6中对象冻结Object.freeze()的使用及注意事项

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

2024-06-10 06:50| 来源: 网络整理| 查看: 265

目录

1.前言:

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

3 特点:

4.语法

5.代码示例:

6.核心注意点 

6.1 代码实现示例:

 

1.前言:

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

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

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

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

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

3 特点:

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

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

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

•不能删除已有属性

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

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

4.语法 Object.freeze(obj) // obj要被冻结的对象。 // 返回值是被冻结的对象。 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)



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

      专题文章
        CopyRight 2018-2019 实验室设备网 版权所有