Czym jest łańcuch prototypów w JavaScript?

By /

JavaScript

Łańcuch prototypów w JavaScript jest to mechanizm, który pozwala obiektom dziedziczyć właściwości i metody od innych obiektów. Jest to kluczowa część modelu obiektowego w JavaScript i pozwala na tworzenie bardziej skomplikowanych struktur danych oraz zachowań w sposób efektywny i zorganizowany.

Co to jest prototyp?

W JavaScript każdy obiekt ma “prototyp”, który jest innym obiektem z którego dziedziczy właściwości. Mechanizm ten pozwala na tworzenie “łańcuchów prototypów”, gdzie obiekt może dziedziczyć właściwości z wielu poziomów prototypów.

Przykład kodu z łańcuchem prototypów

Zacznijmy od stworzenia prostego przykładu, który pokazuje, jak obiekty mogą dziedziczyć właściwości za pośrednictwem prototypów.

<!DOCTYPE html>
<html>
<head>
    <title>Łańcuch prototypów w JavaScript</title>
</head>
<body>
    <script>
        // Definicja konstruktora dla "Vehicle"
        function Vehicle(brand, model) {
            this.brand = brand;
            this.model = model;
        }

        // Dodanie metody do prototypu "Vehicle"
        Vehicle.prototype.displayInfo = function() {
            console.log(`Marka: ${this.brand}, 
                         Model: ${this.model}`);
        };

        // Tworzenie nowego obiektu "Car" dziedziczącego z "Vehicle"
        function Car(brand, model, year) {
            Vehicle.call(this, brand, model);
            this.year = year;
        }

        // Ustawienie prototypu "Car" tak, 
        // aby dziedziczył z "Vehicle"
        Car.prototype = Object.create(Vehicle.prototype);
        Car.prototype.constructor = Car;

        // Dodanie metody do prototypu "Car"
        Car.prototype.displayFullInfo = function() {
            console.log(`Marka: ${this.brand}, 
                         Model: ${this.model}, Rok: ${this.year}`);
        };

        // Tworzenie instancji "Car"
        let myCar = new Car("Ford", "Mustang", 1969);

        // Wywołanie metod
        myCar.displayInfo(); // Dziedziczone z "Vehicle"
        myCar.displayFullInfo(); // Specyficzne dla "Car"
    </script>
</body>
</html>

W powyższym przykładzie, Car dziedziczy właściwości i metody z Vehicle poprzez ustawienie jego prototypu na instancję Vehicle. Dodatkowo, Car posiada swoje specyficzne właściwości i metody, takie jak year i displayFullInfo.

Jak działa łańcuch prototypów?

Kiedy próbujemy uzyskać dostęp do właściwości lub metody obiektu, JavaScript najpierw szuka tej właściwości/metody w samym obiekcie. Jeśli nie znajdzie jej, szuka w prototypie obiektu, a następnie w prototypie prototypu i tak dalej, aż do osiągnięcia końca łańcucha prototypów, którym jest Object.prototype. Jeśli właściwość/metoda nie zostanie znaleziona w całym łańcuchu, ostatecznie zwracany jest undefined.

Podsumowanie

Łańcuch prototypów w JavaScript umożliwia tworzenie złożonych hierarchii dziedziczenia, co jest niezwykle przydatne przy budowaniu rozległych i modularnych aplikacji. Dzięki temu mechanizmowi, można łatwo ponownie wykorzystać i rozszerzać istniejące obiekty bez potrzeby duplikowania kodu. Mechanizm ten jest jednym z fundamentów programowania obiektowego w JavaScript.

 

Powiązane artykuły

Scroll to Top