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从而防止这种资源的节约,不要看它小,而疏忽,不积跬步无以至千里