Jaka jest różnica między __proto__ a prototype?

By /

JavaScript

W JavaScript, mechanizmy dziedziczenia i tworzenia łańcuchów prototypów mogą być źródłem zamieszania, szczególnie gdy przychodzi do rozróżnienia między __proto__ a prototype. Obie te właściwości są związane z prototypami, ale pełnią różne role w kontekście dziedziczenia i instancjonowania obiektów.

__proto__ vs prototype

  • __proto__: Jest to właściwość, która istnieje na każdym obiekcie i wskazuje na prototyp obiektu, z którego dany obiekt dziedziczy metody i właściwości. Innymi słowy, __proto__ zawiera referencję do prototypu obiektu, który był użyty jako szablon do stworzenia instancji obiektu.
  • prototype: Jest to właściwość specyficzna dla funkcji konstruktora. Każda funkcja w JavaScript ma właściwość prototype, która jest używana, gdy funkcja ta jest wywoływana z operatorem new do stworzenia nowej instancji obiektu. Właściwość prototype zawiera obiekt, który będzie przypisany do __proto__ nowo stworzonych obiektów.

Przykład z kodem

Aby lepiej zrozumieć różnicę między __proto__ a prototype, przeanalizujmy poniższy przykład:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>__proto__ vs prototype</title>
</head>
<body>
    <script>
        // Funkcja konstruktora dla Car
        function Car(brand, model) {
            this.brand = brand;
            this.model = model;
        }

        // Dodajemy metodę do prototypu Car
        Car.prototype.getDetails = function() {
            return `${this.brand} ${this.model}`;
        };

        // Tworzymy nową instancję Car
        const myCar = new Car("Ford", "Mustang");

        // Użycie metody z prototypu
        console.log(myCar.getDetails()); // Wyświetla "Ford Mustang"

        // Dostęp do prototypu przez __proto__
        console.log(myCar.__proto__ === Car.prototype); // true

        // Dostęp do prototypu konstruktora
        console.log(Car.prototype);

        // Sprawdzamy, czy __proto__ myCar wskazuje na Car.prototype
        console.log(myCar.__proto__ === Car.prototype); // true
    </script>
</body>
</html>

W tym przykładzie, funkcja Car jest używana jako konstruktor do tworzenia nowych obiektów typu Car. Dodajemy metodę getDetails do prototypu Car, co oznacza, że każda instancja stworzona przez Car będzie miała dostęp do tej metody poprzez swój łańcuch prototypów.

Podsumowanie

  • __proto__ jest właściwością każdego obiektu i wskazuje na prototyp, z którego dany obiekt dziedziczy.
  • prototype jest właściwością funkcji konstruktora i definiuje prototyp dla wszystkich instancji stworzonych przez tę funkcję.
  • Kiedy tworzymy nowy obiekt za pomocą konstruktora i new, właściwość prototype tego konstruktora staje się __proto__ nowego obiektu.

Zrozumienie różnicy między __proto__ a prototype jest kluczowe dla efektywnego wykorzystania mechanizmów dziedziczenia i prototypów w JavaScript, umożliwiając tworzenie bardziej złożonych i efektywnych struktur danych i aplikacji.

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