个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章详解如何在Javascript中使用Object.freeze()由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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 = 100console.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()内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://juejin.im/post/6884384986061864967 。

最后此篇关于详解如何在Javascript中使用Object.freeze()的文章就讲到这里了,如果你想了解更多关于详解如何在Javascript中使用Object.freeze()的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： Python3+Appium实现多台移动设备操作的方法
文章推荐： Python PIL读取的图像发生自动旋转的实现方法
文章推荐： python读出当前时间精度到秒的代码
文章推荐： 从表单校验看JavaScript策略模式的使用详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com