JavaScript Academy · Lezione

Blocco superficiale e profondo

Comprenda fin dove si estende il blocco.

Blocco superficiale e profondo è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

freeze è superficiale

Object.freeze blocca solo il livello superiore di un oggetto. Qualsiasi oggetto o array annidato a cui fa riferimento rimane completamente mutabile.

Questo sorprende molti sviluppatori e causa bug difficili da individuare.

Dimostrare il limite della superficialità

Congeli un oggetto che contiene un oggetto annidato. Il livello superiore è bloccato, ma l'oggetto annidato può ancora cambiare.

const user = Object.freeze({
  name: 'Ada',
  address: { city: 'London' }
});

user.name = 'Grace';
user.address.city = 'Paris';

console.log(user.name);
console.log(user.address.city);

Anche gli array annidati

Anche gli array contenuti in un oggetto congelato non sono protetti. È possibile usare push, pop e riassegnare i loro elementi.

const state = Object.freeze({ tags: ['a', 'b'] });

state.tags.push('c');
state.tags[0] = 'X';

console.log(state.tags);

isFrozen lo conferma

L'oggetto annidato restituisce isFrozen uguale a false, confermando che il congelamento non si è esteso al suo interno.

const obj = Object.freeze({ inner: { v: 1 } });

console.log(Object.isFrozen(obj));
console.log(Object.isFrozen(obj.inner));

Scrivere deepFreeze

Per bloccare tutto, ricorra alla ricorsione: congeli l'oggetto, quindi congeli ogni proprietà che contiene un oggetto annidato. Questo è il congelamento profondo.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const value = obj[key];
    if (value && typeof value === 'object') {
      deepFreeze(value);
    }
  }
  return Object.freeze(obj);
}

const data = deepFreeze({ a: { b: { c: 1 } } });
data.a.b.c = 999;
console.log(data.a.b.c);

deepFreeze sugli array

Anche gli array sono oggetti, quindi la stessa ricorsione li congela. Le operazioni push e le scritture degli elementi vengono così bloccate a ogni livello.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const value = obj[key];
    if (value && typeof value === 'object') deepFreeze(value);
  }
  return Object.freeze(obj);
}

const state = deepFreeze({ list: [1, 2, 3] });
state.list.push(4);
state.list[0] = 99;
console.log(state.list);

Verificare il congelamento profondo

Dopo il congelamento profondo, ogni oggetto annidato restituisce isFrozen uguale a true.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const v = obj[key];
    if (v && typeof v === 'object') deepFreeze(v);
  }
  return Object.freeze(obj);
}

const o = deepFreeze({ a: { b: 1 } });
console.log(Object.isFrozen(o));
console.log(Object.isFrozen(o.a));

Gestire i cicli

Se un oggetto fa riferimento a sé stesso, una ricorsione ingenua entra in un ciclo infinito. Per operare in sicurezza, ignori gli oggetti già congelati.

function deepFreeze(obj) {
  if (Object.isFrozen(obj)) return obj;
  for (const key of Object.keys(obj)) {
    const v = obj[key];
    if (v && typeof v === 'object') deepFreeze(v);
  }
  return Object.freeze(obj);
}

const a = { name: 'a' };
a.self = a;
deepFreeze(a);
console.log(Object.isFrozen(a.self));

Costo del congelamento profondo

Il congelamento profondo visita ogni valore annidato, con un costo in termini di tempo e memoria per le strutture di grandi dimensioni. Congeli solo ciò che deve davvero essere protetto, ad esempio configurazioni condivise o costanti.

function deepFreeze(obj) {
  if (Object.isFrozen(obj)) return obj;
  Object.keys(obj).forEach(k => {
    const v = obj[k];
    if (v && typeof v === 'object') deepFreeze(v);
  });
  return Object.freeze(obj);
}

const small = deepFreeze({ a: 1, b: { c: 2 } });
console.log('frozen deeply:', Object.isFrozen(small.b));

Quando è sufficiente la superficialità

Se un oggetto contiene solo valori primitivi, un Object.freeze superficiale lo protegge già completamente. Il congelamento profondo è importante solo quando sono presenti oggetti o array annidati.

const flat = Object.freeze({ a: 1, b: 'two', c: true });
flat.a = 100;
console.log(flat.a);
console.log(Object.isFrozen(flat));

Perché è importante

Comprendere la differenza tra congelamento superficiale e profondo evita l'errore di pensare che un oggetto congelato sia completamente immutabile. Per i dati annidati, ricorra alla ricorsione. In alternativa alla mutazione, le prossime lezioni illustrano schemi di aggiornamento immutabili che copiano i dati invece di congelarli.

const config = Object.freeze({ db: { host: 'local' } });
config.db.host = 'changed';
console.log('shallow freeze leaked:', config.db.host);

Verifica rapida

Dopo Object.freeze({ a: { b: 1 } }), è possibile modificare il valore annidato b?

Riepilogo: congelamento superficiale e profondo

Ha imparato qual è il limite di profondità del congelamento:

Object.freeze è superficiale; gli oggetti e gli array annidati rimangono mutabili.
deepFreeze usa la ricorsione per bloccare ogni livello.
Per gestire i cicli, ignori gli oggetti già congelati.
Il congelamento profondo ha un costo, quindi congeli solo ciò che deve essere protetto.

Domande Frequenti

La lezione «Blocco superficiale e profondo» è gratuita?

Sì — il testo completo di «Blocco superficiale e profondo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Blocco superficiale e profondo»?

Comprenda fin dove si estende il blocco. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Blocco superficiale e profondo»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy