Object.freeze i seal
Proszę zapobiegać zmianom obiektów.
Object.freeze i seal to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 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.
Dlaczego zamrażać obiekty?
Niezmienność oznacza, że danych nie można zmienić po ich utworzeniu. Zapobiega przypadkowym modyfikacjom, ułatwia analizę kodu i eliminuje całe klasy błędów.
JavaScript udostępnia Object.freeze i Object.seal do blokowania obiektów.
Podstawy Object.freeze
Object.freeze sprawia, że obiekt jest w pełni tylko do odczytu: nie można dodawać, usuwać ani zmieniać właściwości. Zwraca ten sam obiekt, który jest teraz zamrożony.
const user = Object.freeze({ name: 'Ada', age: 36 });
user.age = 99;
console.log(user.age);Sprawdzanie za pomocą isFrozen
Object.isFrozen informuje, czy obiekt jest zamrożony. Jest to przydatne przed próbą jego aktualizacji.
const config = Object.freeze({ debug: false });
const settings = { theme: 'dark' };
console.log(Object.isFrozen(config));
console.log(Object.isFrozen(settings));Ciche i jawne niepowodzenie
W kodzie innym niż ścisły próby zapisu do zamrożonego obiektu kończą się bezgłośnie niepowodzeniem. W trybie ścisłym powodują zgłoszenie wyjątku TypeError. W obu przypadkach wartość pozostaje niezmieniona.
'use strict';
const frozen = Object.freeze({ x: 1 });
try {
frozen.x = 2;
} catch (e) {
console.log(e.name);
}
console.log(frozen.x);Freeze blokuje dodawanie właściwości
Zamrożenie zapobiega również dodawaniu właściwości. Nowy klucz po prostu się nie pojawi.
const point = Object.freeze({ x: 0 });
point.y = 5;
console.log(point.y);
console.log(Object.keys(point));Freeze blokuje usuwanie właściwości
Nie można również usuwać właściwości z zamrożonego obiektu. Właściwość pozostaje na swoim miejscu.
const obj = Object.freeze({ keep: 'me' });
delete obj.keep;
console.log(obj.keep);Object.seal działa inaczej
Object.seal jest mniej restrykcyjne niż freeze. Nie można dodawać ani usuwać właściwości, ale nadal można zmieniać istniejące wartości.
const sealed = Object.seal({ count: 1 });
sealed.count = 2;
sealed.extra = 3;
console.log(sealed.count);
console.log(sealed.extra);Sprawdzanie za pomocą isSealed
Object.isSealed informuje, czy obiekt jest zapieczętowany. Należy pamiętać, że każdy zamrożony obiekt jest również zapieczętowany, ale nie każdy zapieczętowany obiekt jest zamrożony.
const sealed = Object.seal({ a: 1 });
const frozen = Object.freeze({ b: 2 });
console.log(Object.isSealed(sealed));
console.log(Object.isSealed(frozen));
console.log(Object.isFrozen(sealed));Podsumowanie: freeze a seal
freeze: bez dodawania, usuwania i zmian. seal: bez dodawania i usuwania, ale ze zmianą dozwoloną. Należy wybrać seal, gdy struktura obiektu jest stała, ale wartości mogą się zmieniać.
const f = Object.freeze({ v: 1 });
const s = Object.seal({ v: 1 });
f.v = 100;
s.v = 100;
console.log('frozen v:', f.v);
console.log('sealed v:', s.v);preventExtensions
Najmniej restrykcyjną blokadą jest Object.preventExtensions: nie można dodawać właściwości, ale można zmieniać i usuwać istniejące właściwości. Jest to najsłabszy z tych trzech mechanizmów.
const obj = Object.preventExtensions({ a: 1 });
obj.a = 2;
obj.b = 3;
console.log(obj.a);
console.log(obj.b);
console.log(Object.isExtensible(obj));Dlaczego ma to znaczenie
Zamrażanie konfiguracji i stałych zapobiega przypadkowym modyfikacjom w całej bazie kodu. Należy jednak pamiętać, że Object.freeze działa płytko, więc zagnieżdżone obiekty pozostają modyfikowalne. W następnej części zostanie to naprawione.
const SETTINGS = Object.freeze({ maxRetries: 3 });
function tryUpdate() {
SETTINGS.maxRetries = 10;
}
tryUpdate();
console.log(SETTINGS.maxRetries);Szybkie sprawdzenie
Jaka jest różnica między Object.freeze a Object.seal?
Podsumowanie: freeze i seal
Poznali Państwo sposoby blokowania obiektów:
Object.freeze: bez dodawania, usuwania i zmian. Sprawdzanie za pomocąisFrozen.Object.seal: bez dodawania i usuwania, ale ze zmianami dozwolonymi.preventExtensions: blokuje tylko dodawanie.- Wszystkie trzy mechanizmy działają płytko, co prowadzi nas do głębokiego zamrażania.
Często zadawane pytania
Czy lekcja „Object.freeze i seal” jest bezpłatna?
Tak — pełny tekst „Object.freeze i seal” 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 „Object.freeze i seal”?
Proszę zapobiegać zmianom obiektów. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Object.freeze i seal”?
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