Object.freeze()冻结对象、数组 ---【性能优化】

应用场景

Object.freeze()可以提高性能，如果你有一个对象，里面的内容特别特别多，而且都是一些静态数据，你确保不会修改它们，那你其实可以用Object.freeze()冻结起来，这样可以让性能大幅度提升，提升的效果随着数据量的递增而递增。一般什么时候用呢？对于纯展示的大数据，都可以使用Object.freeze提升性能。

Vue中使用Object.freeze()

在vue项目中,data初始化 里面一般会有很多变量,后续如果不想使用它,可以使用Object.freeze()。这样可以避免vue初始化时候,做一些无用的操作,从而提高性能

data(){
    return{
        list:Object.freeze({'不需要改变的数据'})
    }
}

冻结对象

var obj = {
    name: '法外狂徒-张三',
    age: 18,
    address: '上海市'
}
obj.__proto__.habit = '普法栏目'
// 冻结对象
Object.freeze(obj)

// 不能添加新属性
obj.sex = '男'
console.log(obj)    // {name: "法外狂徒-张三", age: 18, address: "上海市"}
 
// 不能删除原有属性
delete obj.age
console.log(obj)    // {name: "法外狂徒-张三", age: 18, address: "上海市"}
 
// 不能修改已有属性的值
obj.name = '尼古拉斯赵四'
console.log(obj)    // {name: "法外狂徒-张三", age: 18, address: "上海市"}
 
// 不能修改原型
obj.__proto__ = '篮球'
console.log(obj.__proto__)  // {habit: "运动", constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, …}
 
// 不能修改已有属性的可枚举性、可配置性、可写性
Object.defineProperty(obj,'address',{ // TypeError: Cannot redefine property: address
    enumerable: false,
    configurable: false,
    writable: true
})

Object.freeze()它的作用是冻结一个对象，被冻结的对象有以下几个特性：

1. 不能添加新属性
2. 不能删除已有属性
3. 不能修改已有属性的值
4. 不能修改原型
5. 不能修改已有属性的可枚举性、可配置性、可写性

冻结数组

var arr = [1,2,3,4,5]
Object.freeze(arr)
arr[0]='新值'
console.log(arr)    // [1, 2, 3, 4, 5]

Object.freeze()是浅冻结。如果对象里还有对象，那么冻结是无效的

下面我们封装一个深冻结函数：

var obj = {
    name: '法外狂徒-张三',
    info: {
        a: 1,
        b: 2
    }
}
function deepFreeze(obj) {
    // 获取所有属性
    var propNames = Object.getOwnPropertyNames(obj)
 
    // 遍历
    propNames.forEach(item => {
        var prop = obj[item]
        // 如果某个属性的属性值是对象，则递归调用
        if (prop instanceof Object && prop !== null) {
            deepFreeze(prop)
        }
    })
    // 冻结自身
    return Object.freeze(obj)
}
deepFreeze(obj)
obj.name = '尼古拉斯赵四'
console.log(obj)    // {name: "法外狂徒-张三", info: {…}}
obj.info.a = 100
console.log(obj.info)   // {a: 1, b: 2}