随笔- 530 文章- 2 评论- 82 阅读- 146万

Object.freeze的应用

概念

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

注意

冻结数组，数组不能被修改，但如果数组中的是对象，对象依然可以被修改
冻结对象，对象中的属性的值依然为一个对象，对象依然可以被修改
要使整个对象或整个数组不可变，需要递归冻结每个类型为对象的属性（深冻结）
严格模式会报错

// 数组中是对象
const arr=[{
  aaa: 42
}]
Object.freeze(arr);
arr[0]["aaa"]=222
arr.push(123) // // Uncaught TypeError: Cannot add property 1, object is not extensible
    at Array.push
console.log(arr); 

// 普通对象
const obj={
  bbb: 000
}
Object.freeze(obj);
obj.bbb=111;
console.log(obj) //  {bbb: 000}

// 对象中的值为对象
const obj2={
  ccc: {aaa:1}
}
Object.freeze(obj2);
obj2.ccc.aaa=2;
console.log(obj2) // {ccc: {aaa:2}}

应用

const本意是无法修改的一个值，但只对简单类型生效，在使用const定义一个对象时，我们依然可以修改这个对象，并且不会报错，所以我们如果要达到无法修改的效果，就可以用Object.freeze()实现。
在Vue中，使用Object.freeze()冻结一个不会被改变的对象时，能大幅提高运行效率，因为vue会对Object.freeze()进行过滤，当遇到的时候就不会再遍历该数据对象。