Jak używać WeakMap w JavaScript?

By /

JavaScript

WeakMap jest specjalnym typem mapy w JavaScript, która pozwala na tworzenie kolekcji par klucz-wartość, gdzie klucze są obiektami, a same klucze są słabo trzymane. Oznacza to, że obecność klucza w WeakMap nie zapobiega odśmiecaniu pamięci (GC) tego klucza. Gdy nie ma już odniesień do klucza poza WeakMap, para klucz-wartość może zostać automatycznie usunięta. WeakMap jest użyteczna w przypadkach, kiedy chcemy efemerycznie powiązać dodatkowe dane z obiektem bez wpływania na cykl życia tego obiektu.

Przykład użycia WeakMap w połączeniu z HTML i JavaScript

W poniższym przykładzie zobaczymy, jak można użyć WeakMap do przechowywania informacji o elementach DOM bez przeszkadzania w procesie odśmiecania pamięci.

Struktura pliku HTML z JavaScript
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Użycie WeakMap w JavaScript</title>
</head>
<body>
    <button id="btn">Kliknij mnie</button>

    <script>
        // Tworzenie WeakMap do przechowywania 
        // informacji o stanie przycisku
        let buttonState = new WeakMap();

        // Pobieranie referencji do przycisku
        let btn = document.getElementById('btn');

        // Ustawianie początkowego stanu przycisku
        buttonState.set(btn, {clicked: false});

        // Dodawanie nasłuchiwania na kliknięcie
        btn.addEventListener('click', function() {
            let state = buttonState.get(btn);
            // Zmiana stanu przycisku
            state.clicked = !state.clicked;
            console.log(`Przycisk został ${state.clicked 
                    ? 'kliknięty' : 'odkliknięty'}`);
        });
    </script>
</body>
</html>

W tym przykładzie używamy WeakMap (buttonState) do przechowywania stanu przycisku DOM (btn). Kluczem w WeakMap jest obiekt przycisku, a wartością jest obiekt zawierający informację, czy przycisk został kliknięty. Dzięki użyciu WeakMap, nie interferujemy z procesem odśmiecania pamięci przeglądarki: gdy przycisk zostanie usunięty z DOM i nie będzie już do niego odniesień, jego wpis w WeakMap również może zostać usunięty przez garbage collector.

Podsumowanie

WeakMap w JavaScript oferuje potężne narzędzie do efemerycznego powiązania danych z obiektami bez wpływania na ich cykl życia i odśmiecanie pamięci. Jest szczególnie przydatny w aplikacjach webowych, gdzie często pracujemy z obiektami DOM i chcemy uniknąć wycieków pamięci poprzez przypadkowe utrzymanie referencji do obiektów, które już nie są potrzebne. Wykorzystując WeakMap, możemy bezpiecznie i efektywnie zarządzać dodatkowymi danymi związanymi z obiektami.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top