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);
后果
非严格模式
增加严格模式
"use strict";
抛出异样提醒该属性是只读的
深度解冻
须要留神的是,如果被解冻的对象具备以对象作为值的属性,这些对象能够被更改
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);
后果
发现对象第一层是被解冻了,然而第二层并没有被解冻,这意味着咱们只实现了浅解冻
要通过解冻对象的所有属性(包含那些将其余对象存储为值的属性)来使对象不可变,咱们必须执行深度解冻—即应用递归在解冻父对象之前解冻子对象。
递归解冻
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 );
后果
在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
从而防止这种资源的节约,不要看它小,而疏忽,不积跬步无以至千里