Object.freeze()学习
文章目录
- 前言
- 一、基本使用
- 二、浅冻结和深冻结
- 1.浅冻结
- 2.深冻结
- 三、Object.freeze()原理
- 总结
前言
Object.freeze()方法可以冻结一个对象,被冻结后的对象是:不能再向这个对象添加新的属性,不能修改原有属性值,不能删除已有属性,不能修改已有属性的可枚举性、可配置性、可写性。
一、基本使用
正常对象操作
var obj = {name:'小米',age:25,address:'地址'};
obj.sex = '男'; //添加属性sex
obj.age = 26; //修改age的值
delete obj.address; //删除属性address
console.log(obj); // {age:26,name:'小米',sex:"男"}
使用Object.freeze()冻结对象
var obj = {name:'小米',age:25,address:'地址'};
obj.__proto__.title = '原型';
Object.freeze(obj); //冻结对象obj
obj.age = 30; //修改原有属性
console.log(obj,'1');
//{name: "小米", age: 25, address: "地址"} "1" //不能修改成功
obj.sex = '男'; //添加新的属性
console.log(obj,'2');
//{name: "小米", age: 25, address: "地址"} "2" //不能添加新属性
delete obj.address; //删除已有属性
console.log(obj,'3');
//{name: "小米", age: 25, address: "地址"} "3" //不能删除已有属性
Object.defineProperty(obj,'age',{enumerable:false,configurable:false,writable:true
}) //不能修改已有属性的可枚举性、可配置性、可写性
console.log(obj,'4') //Cannot redefine property: age
Object.isFrozen()判断对象是否被冻结
var data = {name:'小小',title:'信息'};
var newObj = Object.freeze(data);
console.log(newObj === data,'判读对象是否一致'); //true
console.log(Object.isFrozen(data),'判读data是否被冻结') //true
console.log(Object.isFrozen(newObj),'判读newObj是否被冻结')//true
var newData = {name:'梨梨'}
console.log(Object.isFrozen(newData),'判读newData是否被冻结')//false
冻结数组
var arr = [1,23,34,2];
Object.freeze(arr);
arr[0] = '修改';
console.log(arr);
//Identifier 'arr' has already been declared
二、浅冻结和深冻结
1.浅冻结
如上所说,Object.freeze()可以冻结简单的对象,如果对象里还有对象,那么冻结还有效么?
var obj={name:'小米',info:{title:'新闻',value:100}};
Object.freeze(obj);
obj.name='mm';
console.log(obj);
//{name:'小米',info:{title:'新闻',value:100}}
obj.info.value = 200;
console.log(obj);
//{name:'小米',info:{title:'新闻',value:200}}
以上所示,当对象中的属性为对象时,Object.freeze()失效了。
Object.freeze()只支持浅拷贝。
2.深冻结
function deepFreeze(obj){//获取对象属性名称let names = Object.getOwnPropertyNames(obj);names.forEach(item =>{let data = obj[item];if(data instanceof Object && data !== null){deepFreeze(data)}})return Object.freeze(obj)
}
let dataAll = {name:'小米',info:{value:120,title:'xxx'}};
deepFreeze(dataAll);
dataAll.info.value = 200;
console.log(dataAll);
//{name:'小米',info:{value:120,title:'xxx'}}
三、Object.freeze()原理
Object.freeze()主要是用到以下两个方法:
Object.definedProperty():可以定义对象的属性是不是可以删除,修改等。
Object.seal():可以阻止添加新的属性,不能修改。
Object.defineProperty(person, 'name', {configurable: false,// 表示能否通过delete删除属性,能否修改属性的特性...enumerable: false,// 表示是否可以枚举。直接在对象上定义的属性,基本默认truewritable: false,// 表示能否修改属性的值。直接在对象上定义的属性,基本默认truevalue: 'xm'// 表示属性的值。访问属性时从这里读取,修改属性时,也保存在这里。
})
总结
如果对象内容很多,都是静态数据,而且不会修改它,那可以用Object.freeze()冻结起来。这样可以让性能大幅度提升,提升的效果随着数据量的递增而递增。对于纯展示的大数据,都可以使用Object.freeze提升性能。
在vue项目中,data初始化 里面一般会有很多变量,后续如果不想使用它,可以使用Object.freeze()。这样可以避免vue初始化时候,做一些无用的操作,从而提高性能。
data(){return{list:Object.freeze({'我不需要改变'})}
}
参考博主原文:文章地址
Object.freeze()学习相关推荐
- js object转数组_const 和 Object.freeze() 的区别 ?
[送5本好书]你应该知道的 5 种 TypeScript设计模式 这篇文章介绍了使用const和Object.freeze()在 JS中定义常量和配置值一些做法,以及它们之间的区别. 当我们在 JS ...
- Object.freeze()函数的使用
2019/2/14 分享一个刚学到的知识 Object.freeze() 这是一个函数 这个函数的作用就是将对象进行冻结 就好比咱们封装好一个对象 但是又不希望后续对这个队形近修改 就可以使用这个函数 ...
- Object C学习笔记22-#define 用法
上一篇讲到了typedef 关键字的使用,可以参考文章 Object C 学习笔记--typedef用法 .而在c中还有另外一个很重要的关键字#define. 一. #define 简介 在C中利用预 ...
- Object C学习笔记12-集合
Object C学习笔记12-集合 2014-03-08 17:25 by 贺臣, 262 阅读, 0 评论, 收藏, 编辑 这里讲到的集合是指Set集合,其实Array也是一种类型的集合.在Obje ...
- Object.freeze()
Object.freeze() 方法可以冻结一个对象.一个被冻结的对象再也不能被修改:冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性, ...
- Object.freeze原来有这么大的作用
一.Object.freeze可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性.可配置性.可写性.该方法返回被冻结 ...
- js中Object.freeze()函数的作用
官方文档 Object.freeze() 方法可以冻结一个对象.一个被冻结的对象再也不能被修改:冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性 ...
- Object.freeze()详解
我们都知道const定义基本数据类型,这个值是不可以修改的.那么我们用const定义对象,可以修改对象吗? const a = 5 // a = 10 // TypeError: Assignment ...
- Object.freeze()--将对象冻结--在const中的应用
被冻结的对象不能修改.添加.删除其属性或者属性值(freeze冻结的是堆内存中的值,和栈中的引用无关)--可以防止他人误改 <script> let c = {}; c.a="张 ...
最新文章
- SAP QM Basic Steps to Create Dynamic Modification Rule
- Linux系统命令sort详解
- lightoj-1028 Trailing Zeroes (I)
- Windows数据库编程接口简介
- 日语学习-多邻国-关卡1-餐馆
- USACO翻译:USACO 2013 DEC Silver三题
- AHP计算权重.mat
- matlab二重定积分_二重积分 matlab
- 怎么在windows系统中远程控制服务器
- 程序员女朋友都是在哪找的?
- tf10: 谷歌Deep Dream
- 移远M26实现短信接收
- linux网卡驱动内核文件目录,LINUX内核升级更新网卡驱动
- 自媒体常用小程序:去水印、配音、文案提取
- 自然语言分词词性标注指代
- 分类——LDA、QDA
- [搜索引擎友好之路]搜索引擎优化常见问题与回答
- 车企们的第一辆车是什么样的
- 学计算机女生找不到男朋友,很多漂亮的女生,找不到男朋友,都躲不开这四个原因...
- 唐骏:先做人再做事偶尔作作秀