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

Object.freeze()Object.freeze()方法可以冻结一个对象。无法再修改冻结的对象；当对象被冻结时，对象不能添加新的属性，不能删除已有的属性，也不能修改对象已有属性的可枚举性、可配置性和可写性。属性，并且不能修改现有属性的值。此外，对象的原型在冻结后无法修改。freeze()返回与usage中传入的参数相同的对象constobjectExample={prop1:20,prop2:"Mr.Sheep"};//默认情况下，我们可以修改对象的属性objectExample.prop1=100;console.log(objectExample.prop1)//冻结对象Object.freeze(objectExample);objectExample.prop2="Alice"//如果在严格模式下失败，只会在非严格模式下抛出异常console.log(objectExample.prop2);非严格模式下的结果添加严格模式“usestrict”；抛出异常表示该属性为只读ChangedconsttheObject={x:1,z:2,y:{a:"Hello",b:"Mr.Sheep"}}Object.freeze(theObject);theObject.x=100console.log(theObject.x);theObject.y.a='vipbic';console.log(theObject.y.a);原来物体的第一层是冻结的，而第二层没有冻结，也就是说我们只实现了浅层冻结。要使对象的所有属性（包括将其他对象存储为值的属性）保持不变，我们必须执行深度冻结，即在冻结父对象之前使用递归来冻结子对象。递归冻结consttheObject={x:1,z:2,y:{a:"Hello",b:"Mr.Sheep"}}constdeepFreeze=(obj)=>{constpropNames=Object.getOwnPropertyNames(obj)for(constnameofpropNames){constvalue=obj[name];if(value&&typeofvalue==="object"){deepFreeze(value);}}返回Object.freeze(obj);}deepFreeze(theObject);theObject.y.a=100;console.log(theObject.y.a);结果是在Vue中使用了Object.freeze，在vue2.0中，当你传递一个普通的JavaScript对象给Vue实例的data选项时，Vue会遍历该对象的所有属性，并使用Object.defineProperty将这些属性全部变成getter/二传手。这些getters/setters对用户是不可见的，但在内部它们让Vue跟踪依赖关系并在访问和修改属性时通知更改。有时在实际应用中，我们只是用它来存储一个对象或者数组，并不要求它响应相应的视图，但是在这个过程中，Vue仍然会使用object.defineProperty来监听数组，这是一种浪费表现。所以我们可以使用Object.freeze来冻结数据{{item.text}}data(){letdata=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用于避免这种资源浪费。别看小了，忽略不计。