JavaScript Academy · leksjon

Grunn og dyp freezing

Forstå hvor langt freezing rekker.

Leksjon 2 av 413 trinn

Grunn og dyp freezing er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

freeze er grunn

Object.freeze låser bare øverste nivå i et objekt. Alle nestede objekter eller arrayer det refererer til, kan fortsatt endres fritt.

Dette overrasker mange utviklere og fører til subtile feil.

Påvisning av grensen for grunn frysing

Frys et objekt med et nestet objekt. Det øverste nivået er låst, men det nestede objektet kan fortsatt endres.

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);

Nestede arrayer også

Arrayer inne i et fryst objekt er også ubeskyttet. De kan bruke push og pop og tilordne elementene på nytt.

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

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

console.log(state.tags);

isFrozen bekrefter det

Det nestede objektet rapporterer isFrozen som false, noe som bekrefter at frysingen ikke nådde inn i objektet.

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

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

Skrive deepFreeze

For å låse alt må De bruke rekursjon: frys objektet, og frys deretter hver nestede objektegenskap. Dette kalles dyp frysing.

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 på arrayer

Arrayer er også objekter, så den samme rekursjonen fryser dem. Deretter blokkeres push-operasjoner og skrivinger til elementer på alle nivåer.

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);

Bekrefte dyp frysing

Etter dyp frysing rapporterer hvert nestede objekt isFrozen som 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));

Beskyttelse mot sykluser

Hvis et objekt refererer til seg selv, går naiv rekursjon i en uendelig løkke. Hopp over objekter som allerede er fryst, for å unngå dette.

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));

Kostnaden ved dyp frysing

Dyp frysing besøker hver nestede verdi, noe som koster tid og minne for store strukturer. Frys bare det som faktisk trenger beskyttelse, for eksempel delt konfigurasjon eller konstanter.

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));

Når grunn frysing er nok

Hvis et objekt bare inneholder primitive verdier, beskytter en grunn Object.freeze det allerede fullstendig. Dyp frysing er bare relevant når det finnes nestede objekter eller arrayer.

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

Hvorfor det er viktig

Forståelse av grunn kontra dyp frysing forhindrer feilen med å tro at et fryst objekt er fullstendig uforanderlig. For nestede data må De bruke rekursjon. Som et alternativ til mutering dekker de neste leksjonene mønstre for uforanderlige oppdateringer som kopierer i stedet for å fryse.

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

Hurtigsjekk

Etter Object.freeze({ a: { b: 1 } }), kan De endre den nestede b?

Besvar den i den interaktive leksjonen

Oppsummering: grunn kontra dyp frysing

De har lært hvor dypt frysing virker:

Object.freeze er grunn; nestede objekter og arrayer kan fortsatt endres.
deepFreeze bruker rekursjon for å låse alle nivåer.
Beskytt mot sykluser ved å hoppe over objekter som allerede er fryst.
Dyp frysing har en kostnad, så frys bare det som trenger beskyttelse.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Grunn og dyp freezing» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Grunn og dyp freezing», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Grunn og dyp freezing»?

Forstå hvor langt freezing rekker. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Grunn og dyp freezing»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy