Diretório de artigos
prefácio
O método Object.freeze() pode congelar um objeto. O objeto congelado é: nenhum novo atributo pode ser adicionado a este objeto , os valores originais do atributo não podem ser modificados , os atributos existentes não podem ser excluídos e a enumeração de atributos existentes não pode ser modificado. desempenho, configurabilidade e capacidade de escrita .
1. Uso básico
manipulação normal de objetos
var obj = {
name:'小米',age:25,address:'地址'};
obj.sex = '男'; //添加属性sex
obj.age = 26; //修改age的值
delete obj.address; //删除属性address
console.log(obj); // {age:26,name:'小米',sex:"男"}
Congelar objetos com Object.freeze()
var obj = {
name:'小米',age:25,address:'地址'};
obj.__proto__.title = '原型';
Object.freeze(obj); //冻结对象obj
obj.age = 30; //修改原有属性
console.log(obj,'1');
//{name: "小米", age: 25, address: "地址"} "1" //不能修改成功
obj.sex = '男'; //添加新的属性
console.log(obj,'2');
//{name: "小米", age: 25, address: "地址"} "2" //不能添加新属性
delete obj.address; //删除已有属性
console.log(obj,'3');
//{name: "小米", age: 25, address: "地址"} "3" //不能删除已有属性
Object.defineProperty(obj,'age',{
enumerable:false,
configurable:false,
writable:true
}) //不能修改已有属性的可枚举性、可配置性、可写性
console.log(obj,'4') //Cannot redefine property: age
Object.isFrozen() determina se o objeto está congelado
var data = {
name:'小小',title:'信息'};
var newObj = Object.freeze(data);
console.log(newObj === data,'判读对象是否一致'); //true
console.log(Object.isFrozen(data),'判读data是否被冻结') //true
console.log(Object.isFrozen(newObj),'判读newObj是否被冻结')//true
var newData = {
name:'梨梨'}
console.log(Object.isFrozen(newData),'判读newData是否被冻结')//false
matriz de congelamento
var arr = [1,23,34,2];
Object.freeze(arr);
arr[0] = '修改';
console.log(arr);
//Identifier 'arr' has already been declared
2. Congelamento superficial e ultracongelamento
1. Congelamento superficial
Como mencionado acima, Object.freeze() pode congelar objetos simples. Se ainda houver objetos no objeto, o congelamento ainda é válido?
var obj={
name:'小米',info:{
title:'新闻',value:100}};
Object.freeze(obj);
obj.name='mm';
console.log(obj);
//{name:'小米',info:{title:'新闻',value:100}}
obj.info.value = 200;
console.log(obj);
//{name:'小米',info:{title:'新闻',value:200}}
Conforme mostrado acima, quando a propriedade no objeto é um objeto, Object.freeze() falha.
Object.freeze() suporta apenas cópia rasa。
2. Congelamento profundo
function deepFreeze(obj){
//获取对象属性名称
let names = Object.getOwnPropertyNames(obj);
names.forEach(item =>{
let data = obj[item];
if(data instanceof Object && data !== null){
deepFreeze(data)
}
})
return Object.freeze(obj)
}
let dataAll = {
name:'小米',info:{
value:120,title:'xxx'}};
deepFreeze(dataAll);
dataAll.info.value = 200;
console.log(dataAll);
//{name:'小米',info:{value:120,title:'xxx'}}
3. Princípio de Object.freeze()
Object.freeze() usa principalmente os dois métodos a seguir:
Object.definedProperty(): Pode definir se as propriedades do objeto podem ser deletadas, modificadas, etc.
Object.seal(): Pode impedir a adição de novas propriedades e não pode modificá-las.
Object.defineProperty(person, 'name', {
configurable: false,// 表示能否通过delete删除属性，能否修改属性的特性...
enumerable: false,// 表示是否可以枚举。直接在对象上定义的属性，基本默认true
writable: false,// 表示能否修改属性的值。直接在对象上定义的属性，基本默认true
value: 'xm'// 表示属性的值。访问属性时从这里读取，修改属性时，也保存在这里。
})
Resumir
Se o objeto tiver muito conteúdo e for um dado estático, e não for modificado, pode ser congelado com Object.freeze(). Dessa forma, o desempenho pode ser bastante aprimorado e o efeito da melhoria aumenta com o aumento da quantidade de dados. Para grandes dados exibidos puramente, Object.freeze pode ser usado para melhorar o desempenho.
No projeto Vue, normalmente existem muitas variáveis na inicialização dos dados, caso não queira utilizar posteriormente, pode utilizar Object.freeze(). Isso pode evitar algumas operações inúteis quando o Vue é inicializado, melhorando assim o desempenho.
data(){
return{
list:Object.freeze({
'我不需要改变'})
}
}
Consulte o texto original do blogueiro: endereço do artigo