El uso del método js frozen object Object.freeze()

Todos sabemos que const define el tipo de datos básico y este valor no se puede modificar. Entonces, si definimos un objeto usando const, ¿podemos modificar el objeto?

const a = 5
// a = 10  // TypeError: Assignment to constant variable.

const obj = {
    name: '张三'
}
obj.name = '李四'
console.log(obj)    // {name: "李四"}

La respuesta es sí. Entonces, ¿qué debemos hacer si queremos definir un objeto que no se puede modificar?
Entonces necesitas usar Object.freeze().
Su función es congelar un objeto, el objeto congelado tiene las siguientes características:

No se pueden agregar nuevas propiedades
No se pueden eliminar propiedades existentes
No se puede modificar el valor de los atributos existentes.
No se puede modificar el prototipo
La enumerabilidad, configurabilidad y escritura de las propiedades existentes no se pueden modificar.

Uso básico

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,// 表示是否可以枚举。直接在对象上定义的属性，基本默认true
    configurable: false,// 表示能否通过delete删除属性，能否修改属性的特性
    writable: true// 表示能否修改属性的值。直接在对象上定义的属性，基本默认true
})

Una cosa a tener en cuenta aquí es que el valor de retorno de Object.freeze() es el objeto congelado, que es completamente igual al objeto entrante, por lo que generalmente no necesitamos recibir el valor de retorno. Hemos congelado el objeto de arriba, entonces, ¿podemos congelar la matriz?

congelar matriz

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

De hecho, es fácil entender que la esencia de una matriz es un objeto, pero la clave del objeto es un subíndice, por lo que también se puede congelar. Si todavía hay objetos en mi objeto, ¿la congelación seguirá siendo efectiva?

congelación superficial

var obj = {
    name: '张三',
    info: {
        a: 1,
        b: 2
    }
}
Object.freeze(obj)

obj.name = '李四'
console.log(obj)    // {info: {a: 1, b: 2},name: "张三"}

obj.info.a = 66
console.log(obj.info)   // {a: 66, b: 2}

Puede ver que si todavía hay objetos en el objeto, Object.freeze() falla. Object.freeze() solo admite congelación superficial. A continuación encapsulamos una función de congelación profunda, que se puede utilizar directamente en el futuro.

congelación profunda

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}

Escenarios de aplicación

Object.freeze() puede mejorar el rendimiento. Si tiene un objeto con mucho contenido, y son todos datos estáticos y está seguro de no modificarlos, puede congelarlo con Object.freeze(), así Puede mejorar enormemente el rendimiento y el efecto de la mejora aumenta con el aumento del volumen de datos. ¿Cuándo se suele utilizar? Para big data que son puramente para visualización, puede usar Object.freeze para mejorar el rendimiento.

Usando Object.freeze en Vue

En los proyectos vue, generalmente hay muchas variables en la inicialización de datos, si no desea usarlas más adelante, puede usar Object.freeze (). Esto puede evitar realizar algunas operaciones inútiles cuando se inicializa Vue, mejorando así el rendimiento.

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