JavaScript Academy · Lekcja

Płytkie a głębokie zamrażanie

Proszę zrozumieć, jak głęboko sięga zamrażanie.

Płytkie a głębokie zamrażanie to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Freeze działa płytko

Object.freeze blokuje tylko najwyższy poziom obiektu. Każdy zagnieżdżony obiekt lub tablica, do których obiekt się odwołuje, pozostaje w pełni modyfikowalny.

Zaskakuje to wielu programistów i prowadzi do trudnych do wykrycia błędów.

Dowód ograniczenia płytkiego zamrażania

Zamroźmy obiekt zawierający zagnieżdżony obiekt. Najwyższy poziom zostanie zablokowany, ale zagnieżdżony obiekt nadal będzie można zmieniać.

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

Zagnieżdżone tablice również

Tablice znajdujące się w zamrożonym obiekcie także nie są chronione. Można wykonywać na nich push i pop oraz ponownie przypisywać ich elementy.

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

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

console.log(state.tags);

isFrozen to potwierdza

Zagnieżdżony obiekt zwraca wartość false dla isFrozen, co potwierdza, że zamrożenie nie objęło jego wnętrza.

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

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

Pisanie deepFreeze

Aby zablokować wszystko, należy użyć rekurencji: zamrozić obiekt, a następnie zamrozić każdą zagnieżdżoną właściwość będącą obiektem. Nazywa się to głębokim zamrażaniem.

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 dla tablic

Tablice również są obiektami, więc ta sama rekurencja je zamraża. Od tego momentu dodawanie elementów i zapisy do elementów są blokowane na każdym poziomie.

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

Weryfikowanie głębokiego zamrażania

Po głębokim zamrożeniu każdy zagnieżdżony obiekt zwraca wartość true dla isFrozen.

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

Zabezpieczenie przed cyklami

Jeśli obiekt odwołuje się do samego siebie, naiwna rekurencja będzie działać bez końca. Aby zachować bezpieczeństwo, należy pomijać obiekty już zamrożone.

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

Koszt głębokiego zamrażania

Głębokie zamrażanie odwiedza każdą zagnieżdżoną wartość, co w przypadku dużych struktur wiąże się z kosztem czasu i pamięci. Należy zamrażać tylko to, co rzeczywiście wymaga ochrony, na przykład współdzieloną konfigurację lub stałe.

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

Kiedy płytkie zamrażanie wystarcza

Jeśli obiekt zawiera tylko wartości prymitywne, płytkie Object.freeze już w pełni go chroni. Głębokie zamrażanie ma znaczenie tylko wtedy, gdy występują zagnieżdżone obiekty lub tablice.

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

Dlaczego ma to znaczenie

Zrozumienie różnicy między płytkim a głębokim zamrażaniem zapobiega błędnemu przekonaniu, że zamrożony obiekt jest w pełni niezmienny. W przypadku zagnieżdżonych danych należy użyć rekurencji. Alternatywą dla mutowania są omawiane w następnych lekcjach wzorce niemutowalnych aktualizacji, które tworzą kopie zamiast zamrażać obiekty.

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

Szybkie sprawdzenie

Czy po wykonaniu Object.freeze({ a: { b: 1 } }) można zmienić zagnieżdżoną właściwość b?

Podsumowanie: płytkie i głębokie zamrażanie

Poznali Państwo ograniczenie głębokości zamrażania:

Object.freeze działa płytko; zagnieżdżone obiekty i tablice pozostają modyfikowalne.
deepFreeze korzysta z rekurencji, aby zablokować każdy poziom.
Należy zabezpieczyć się przed cyklami, pomijając obiekty już zamrożone.
Głębokie zamrażanie ma swój koszt, dlatego należy zamrażać tylko to, co wymaga ochrony.

Często zadawane pytania

Czy lekcja „Płytkie a głębokie zamrażanie” jest bezpłatna?

Tak — pełny tekst „Płytkie a głębokie zamrażanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Płytkie a głębokie zamrażanie”?

Proszę zrozumieć, jak głęboko sięga zamrażanie. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Płytkie a głębokie zamrażanie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Object.freeze i seal
Płytkie a głębokie zamrażanie
Wzorce niezmiennych aktualizacji
structuredClone do głębokiego kopiowania

← Powrót do JavaScript Academy