乐趣区

关于javascript:如何在Javascript中使用Objectfreeze

jiezi

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

退出移动版