详解如何在Javascript中使用Object.freeze()


Posted in Javascript onOctober 18, 2020

Object.freeze()

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象

用法

const objectExample = {
 prop1: 20,
 prop2: "羊先生"
};

// 默认情况下,我们可以根据需要修改对象的属性
objectExample.prop1 = 100;
console.log(objectExample.prop1)

// 冻结对象
Object.freeze(objectExample);

objectExample.prop2 = "Alice" // 如果在严格模式会抛出失败,在非严格模式下只会抛出异常

console.log(objectExample.prop2);

结果

非严格模式

详解如何在Javascript中使用Object.freeze()

添加严格模式

"use strict";

详解如何在Javascript中使用Object.freeze()

抛出异常提示该属性是只读的

深度冻结

需要注意的是,如果被冻结的对象具有以对象作为值的属性,这些对象可以被更改

const theObject = {
 x: 1,
 z: 2,
 y: {
  a: "Hello",
  b: "羊先生"
 }
}

Object.freeze(theObject);

theObject.x = 100
console.log(theObject.x);

theObject.y.a = 'vipbic';
console.log(theObject.y.a);

结果

详解如何在Javascript中使用Object.freeze()

发现对象第一层是被冻结了,但是第二层并没有被冻结,这意味着我们只实现了「浅冻结」
要通过冻结对象的所有属性(包括那些将其他对象存储为值的属性)来使对象不可变,我们必须执行「深度冻结」—即使用递归在冻结父对象之前冻结子对象。

递归冻结

const theObject = {
 x: 1,
 z: 2,
 y: {
  a: "Hello",
  b: "羊先生"
 }
}

const deepFreeze = (obj) => {

 const propNames = Object.getOwnPropertyNames(obj)

 for (const name of propNames) {
  const value = obj[name];

  if (value && typeof value === "object") { 
   deepFreeze(value);
  }
 }

 return Object.freeze(obj);
}

deepFreeze(theObject);
theObject.y.a = 100;
console.log(theObject.y.a );

结果

详解如何在Javascript中使用Object.freeze()

在Vue中使用Object.freeze

在vue2.0中,当你把一个普通的 JavaScript 对象传给 Vue 实例的  data  选项,Vue 将遍历此对象所有的属性,并使用  Object.defineProperty  把这些属性全部转为 getter/setter,这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化

有时在实际应用中,我们只是用来存储某个对象或者数组,并不要求它响应对应的视图,但在这个过程中vue还是会用object.defineProperty来监听这个数组,这样就是一种性能浪费,所以我们阔以使用Object.freeze来冻结数据

<h4 v-for="(item,idx) in items" :key="idx">{{ item.text }}</h4>
data() {
  let data = Object.freeze([{text:'羊先生'},{text:'ipbic'}])
  return {
    msg: '',
    items:data
  }
},
mounted() {

  this.items[0].text = '分享快乐'; // 界面不会更新

  this.items = [{ text: 'itnavs' },{ text: '分享快乐' }]; // 界面会更新

  this.items = Object.freeze([{ text: 'itnavs' },{ text: '分享快乐' }]); // 界面会更新
},

如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。在我的实际开发中,这种提升大约有5~10倍,倍数随着数据量递增

使用Object.freeze从而避免这种资源的浪费,不要看它小,而忽略,不积跬步无以至千里

到此这篇关于详解如何在Javascript中使用Object.freeze()的文章就介绍到这了,更多相关Javascript Object.freeze()内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
JavaScript门道之标准库
May 26 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 #Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 #Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 #Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 #Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 #Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 #jQuery
vue使用swiper实现左右滑动切换图片
Oct 16 #Javascript
You might like
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
js实现无缝滚动双图切换效果
2019/07/09 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
跟老齐学Python之重回函数
2014/10/10 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python+微信接口实现运维报警
2016/08/27 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python的debug实用工具 pdb详解
2019/07/12 Python
python搜索包的路径的实现方法
2019/07/19 Python
简单了解python协程的相关知识
2019/08/31 Python
python通过实例讲解反射机制
2019/10/17 Python
python框架django项目部署相关知识详解
2019/11/04 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
python如何修改文件时间属性
2021/02/05 Python
学徒工职责
2014/03/06 职场文书
综合内勤岗位职责
2014/04/14 职场文书
励志演讲稿800字
2014/08/21 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
还款承诺书范本
2015/01/20 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis