Jaki jest prototyp w JavaScript

JavaScript jest językiem dynamicznym i prototypowym, dlatego prototypy są jedną z najważniejszych koncepcji JavaScript. Najpierw omówmy, dlaczego potrzebujemy prototypów.

Dlaczego potrzebujemy prototypów?

Jak wspomniano wcześniej, JavaScript jest językiem dynamicznym, co oznacza, że ​​możemy dodawać właściwości do obiektu w dowolnym momencie. Przejrzyjmy przykład, aby to wyjaśnić:

Funkcja Player ()
Ten.name = „hazard”;
Ten.club = „chelsea”;

var gracz1 = new Player ();
gracz1.Wiek = 30;
Alert (gracz1.wiek);
var gracz2 = new Player ();
Alert (gracz2.wiek);

W tym przykładzie podaliśmy inną właściwość odtwarzaczowi obiektu. Jednak pierwszy obiekt I-e Player1 będzie miał właściwość wiekową, ale nie drugi obiekt I-E Player2. Powodem tego jest to, że właściwość wieku jest zdefiniowana tylko dla obiektu Player1.

Widzimy, że obiekt Player2 pokazuje nieokreślone w poniższym wyjściu powyższego przykładu:

Teraz, gdy wiemy, jakim problemem stoimy, pojawia się pytanie: jakie jest rozwiązanie? Rozwiązaniem tego problemu jest „prototyp”.

Rozwiązanie

Prototypy są wbudowaną funkcją JavaScript. Za każdym razem, gdy tworzysz funkcję JavaScript, JavaScript automatycznie dodaje prototyp do tej funkcji. Możemy powiedzieć, że prototyp to obiekt, który pozwala dodać nowe właściwości do istniejącego obiektu. Krótko mówiąc, prototypy zawierają klasę podstawową wszystkich obiektów, pomagając nam osiągnąć dziedzictwo.

Możemy dołączyć dodatkowe właściwości do obiektu prototypowego, który następnie zostanie udostępniony we wszystkich instancjach.

Teraz użyjemy właściwości prototypowej w powyższym przykładzie, aby rozwiązać problem udostępniania właściwości wiekowej wszystkim obiektom i-e Player1 i Player2.

Funkcja Player ()
Ten.name = „hazard”;
Ten.club = „chelsea”;

Gracz.prototyp.Wiek = 30;
var gracz1 = new Player ();
Alert (gracz1.wiek);
var gracz2 = new Player ();
Alert (gracz2.wiek);

Zobaczymy, że wiek obu graczy będzie teraz 30. Wyjście pokazano poniżej:

Mówiąc prosto, prototypowa właściwość JavaScript pomaga nam w dodaniu nowych właściwości do konstruktorów obiektów, jak pokazano w powyższym przykładzie.

Prototypowa właściwość obiektu

Każdy obiekt inicjowany za pomocą literalnej składni lub inicjowanej za pomocą składni konstruktora za pomocą nowego słowa kluczowego, zawiera właściwość __proto__. To wskazuje na prototypowy obiekt, który utworzył ten obiekt.

Jeśli chcesz zobaczyć prototypową właściwość obiektu, możemy ją zobaczyć w narzędziu debugowania programistów. W poniższym przykładzie będziemy go zaimplementować i wyświetlimy w oknie konsoli.

Przykład

Funkcja Player ()
Ten.name = „hazard”;
Ten.club = „chelsea”;

var graczObject = new Player ();
// okno konsoli
konsola.Log (gracz.prototyp);
konsola.Log (PlayerObject.prototyp);
konsola.Log (PlayerObject.__proto__);
konsola.log (TypeOf Player);
konsola.dziennik();

W tym przykładzie możemy zobaczyć, że dostęp do właściwości prototypu funkcji jest dostępny za pomocą nazwy funkcji, która jest odtwarzacz.prototyp.

W tym przykładzie widzimy również, że właściwość prototypu nie jest narażona na obiekt, możemy uzyskać dostęp tylko za pomocą „__proto__”.

Prototyp obiektu

W poprzednim przykładzie widzieliśmy, że właściwość prototypu obiektu jest niezdefiniowana, co oznacza, że ​​jest niewidoczna. Możemy użyć obiektu.metoda getPrototypeof (OBJ) zamiast tej, której użyliśmy „__proto__”. W ten sposób nie będzie to niezdefiniowane i będziemy mogli uzyskać dostęp do obiektu prototypowego.

Funkcja Player ()
Ten.name = „hazard”;
Ten.club = „chelsea”;

var graczObject = new Player ();
Gracz.prototyp.wybrane = funkcja ()
alert („wybrany do dzisiejszego zespołu”);

var gracz1 = new Player ();
var checkingProto = obiekt.getPrototypeof (gracz1);
// Zwraca to prototypowy obiekt Prezent1 Player1
Alert (CheckingProto.konstruktor);
// To zwróci wybraną funkcję Player1

Wniosek

W tym artykule omówiliśmy głównie podstawową koncepcję prototypów w JavaScript. Wykopaliśmy trochę głębiej i omówiliśmy, jaki jest prototyp w JavaScript. Omówiliśmy również problem i podaliśmy rozwiązanie za pomocą prototypu. Oprócz tego omawialiśmy znalezienie właściwości i metod obiektów w JavaScript za pomocą prototypów. Wszystko to zostało wykazane za pomocą przykładów w celu lepszego zrozumienia koncepcji.