JavaScript Prototypal Inheritance

Podsumowanie: w tym tutorialu, nauczysz się jak działa prototypowe dziedziczenie w JavaScript.

Wprowadzenie do prototypowego dziedziczenia w JavaScript

Jeśli pracowałeś z innymi zorientowanymi obiektowo językami programowania, takimi jak Java lub C++, znasz koncepcję dziedziczenia.

W tym paradygmacie programowania, klasa jest wzorem do tworzenia obiektów. Jeśli chcesz, aby nowa klasa ponownie wykorzystywała funkcjonalność istniejącej klasy, możesz utworzyć nową klasę, która rozszerza istniejącą klasę. To się nazywa klasyczne dziedziczenie.

JavaScript nie używa klasycznego dziedziczenia. Zamiast tego używa dziedziczenia prototypowego.

W dziedziczeniu prototypowym obiekt „dziedziczy” właściwości od innego obiektu poprzez powiązanie prototypowe.

Dziedziczenie prototypowe w JavaScripcie i __proto__

Przyjrzyjrzyjmy się przykładowi, aby wyjaśnić tę koncepcję.

Poniżej zdefiniowano obiekt person:

Code language: JavaScript (javascript)

Obiekt person ma dwie właściwości:

• name, która przechowuje wartość łańcuchową.
• greet, która przechowuje wartość będącą funkcją. Metoda greet jest znana jako metoda obiektu person.

Domyślnie JavaScript dostarcza funkcję Object() i prototyp obiektu, do którego można uzyskać dostęp poprzez właściwość prototype funkcji Object():

Gdy używasz składni literalnej obiektu do zdefiniowania obiektu, obiekt jest instancją Object. Dlatego wyrażenie person instanceof Object zwraca true:

Code language: JavaScript (javascript)

Wyjście:

Code language: JavaScript (javascript)

Obiekt person łączy się również z obiektem Object.prototype za pośrednictwem powiązania ].

Innymi słowy, można uzyskać dostęp do dowolnych właściwości obiektu Object.prototype za pośrednictwem obiektu person. Na przykład:

Code language: JavaScript (javascript)

Wyjście:

Code language: JavaScript (javascript)

Wynik jest domyślną konwersją z obiektu na łańcuch znaków.

Gdy wywołasz metodę toString() na obiekcie person, JavaScript nie może go znaleźć. Zatem JavaScript podąża za łańcuchem prototypów i szuka metody na obiekcie Object.prototype. JavaScript może znaleźć metodę toString() na obiekcie Object.prototype i wykonuje ją.

Aby uzyskać dostęp do prototypu obiektu person, można użyć jego właściwości __proto__:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Poniżej zdefiniowano inny obiekt o nazwie teacher. Obiekt teacher posiada metodę teach():

Code language: JavaScript (javascript)

Jeśli chcemy, aby obiekt teacher miał dostęp do wszystkich właściwości obiektu person, możemy ustawić prototyp obiektu teacher na obiekt person:

Code language: JavaScript (javascript)

Zauważ, że nigdy nie powinieneś używać __proto__ w kodzie produkcyjnym. Jest to tylko do celów nauki i zrozumienia.

Teraz obiekt teacher może uzyskać dostęp do właściwości name i metody greet() z obiektu person poprzez łańcuch prototypów:

Code language: JavaScript (javascript)

Wyjście:

Code language: JavaScript (javascript)

Gdy wywołujesz metodę greet() na obiekcie teacher, JavaScript znajduje ją najpierw na obiekcie teacher.

Ponieważ JavaScript nie może znaleźć metody na obiekcie teacher, podąża za łańcuchem prototypów i szuka metody na obiekcie person. Tym razem JavaScript może znaleźć metodę na obiekcie person i wykonuje metodę greet().

W JavaScript mówimy, że obiekt teacher dziedziczy właściwości obiektu person. I to jest właśnie dziedziczenie prototypowe.

Standardowy sposób implementacji dziedziczenia prototypowego w ES5

ES5 zapewnił standardowy sposób pracy z dziedziczeniem prototypowym za pomocą metody Object.create().

Zauważ, że teraz powinieneś używać nowszych słów kluczowych ES6 class i extends do implementacji dziedziczenia. Jest to znacznie prostsze.

Metoda Object.create() tworzy nowy obiekt i używa istniejącego obiektu jako prototypu nowego obiektu:

Code language: JavaScript (javascript)

Metoda Object.create() przyjmuje dwa argumenty:

• Pierwszy argument (proto) to obiekt używany jako prototyp nowego obiektu.
• Drugi argument (propertiesObject), jeżeli jest podany, jest opcjonalnym obiektem określającym dodatkowe właściwości nowego obiektu.

Załóżmy, że masz obiekt person:

Code language: JavaScript (javascript)

Następnie tworzymy pusty obiekt teacher z __proto__ obiektu person:

Code language: JavaScript (javascript)

Po tym można zdefiniować właściwości dla obiektu teacher:

Code language: JavaScript (javascript)

Albo możesz wykonać wszystkie te kroki w jednej deklaracji w następujący sposób:

Code language: JavaScript (javascript)

ES5 wprowadził również metodę Object.getPrototypeOf(), która zwraca prototyp obiektu. Na przykład:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Podsumowanie

• Dziedziczenie pozwala jednemu obiektowi korzystać z właściwości i metod innego obiektu.
• JavaScript używa prototypowego dziedziczenia osiąganego przez prototypowe powiązanie.

.