JavaScript jest językiem o ugruntowanej pozycji, ale w ES6 dodał obsługę klasycznego programowania obiektowego (OOP). Do czasu dodania funkcji, takich jak deklaracje klas, JavaScript obsługiwał OOP przy użyciu mniej znanego paradygmatu opartego na prototypach. Za pomocą obu podejść można jednak tworzyć złożone aplikacje korzystające z funkcji obiektowych.
Konstruktor w prototypowym JavaScript wygląda bardzo podobnie do każdej innej funkcji. Główną różnicą jest to, że możesz użyć tej funkcji konstruktora do tworzenia obiektów.
Co to jest konstruktor w JavaScript?
Konstruktorzy są jednym z podstawowe pojęcia programowania obiektowego. Konstruktor to funkcja, której można użyć do utworzenia instancji obiektu. Oprócz tworzenia nowego obiektu, konstruktor określa właściwości i zachowania, które będą do niego należeć.
Składnia konstruktora
funkcjonowaćNazwaKonstruktora() {
ta.właściwość1 = "Właściwość1";
ta.właściwość2 = "Właściwość2";
ta.właściwość3 = "Właściwość3";
}Możesz utworzyć konstruktora za pomocą
funkcjonować słowo kluczowe, ponieważ jest to zasadniczo jak każda inna funkcja. Jednak konstruktorzy przestrzegają następujących konwencji:- Aby odróżnić je od innych funkcji, użyj nazwy konstruktora rozpoczynającej się wielką literą.
- Konstruktorzy używają Ten słowo kluczowe inaczej. Wewnątrz konstruktora, Ten odnosi się do nowego obiektu, który utworzy konstruktor.
- W przeciwieństwie do funkcji JavaScript, konstruktory definiują właściwości i zachowania zamiast zwracać wartości.
Używanie konstruktora do tworzenia nowych obiektów
W JavaScript użycie konstruktora do stworzenia obiektu jest łatwym zadaniem. Oto prosty konstruktor z następującym po nim wywołaniem:
funkcjonowaćStudent() {
ta.nazwa = "Gloria";
ta.płeć = "Kobieta";
Tenwiek = 19;
}
pozwalać studentka = nowy Student();
w tym przykładzie studentka jest obiektem utworzonym z Student konstruktor. Użyj nowy słowo kluczowe, aby wywołać funkcję jako konstruktor. To słowo kluczowe mówi JavaScriptowi, aby utworzył nową instancję Student. Nie powinieneś wywoływać tej funkcji bez nowy słowo kluczowe, ponieważ Ten wewnątrz konstruktora nie wskaże nowego obiektu. po budowie, studentka posiada wszystkie właściwości Student. Możesz uzyskiwać dostęp do tych właściwości i modyfikować je tak samo, jak w przypadku każdego innego obiektu.
Ważne rzeczy, które należy wiedzieć o konstruktorach JavaScript
Praca z konstruktorami może być bardzo męcząca, a jednocześnie łatwa. Oto kilka ważnych rzeczy, które każdy programista powinien wiedzieć o pracy z konstruktorami.
Używanie konstruktorów z argumentami
Konstruktor można rozszerzyć, aby odbierał argumenty. Jest to bardzo ważne, jeśli chcesz pisać responsywny, elastyczny kod.
Za każdym razem, gdy tworzysz obiekt z konstruktora, obiekt odziedziczy wszystkie właściwości zadeklarowane w konstruktorze. Na przykład studentka utworzone powyżej będą miały właściwości nazwa, płeć, I wiek ze stałymi wartościami początkowymi. Chociaż możesz zmienić każdą właściwość ręcznie, pisanie programu używającego wielu obiektów wymagałoby dużo pracy.
Na szczęście konstruktory JavaScript mogą akceptować parametry, tak jak każda inna funkcja. Możesz zmienić Student konstruktora, aby zaakceptował dwa parametry:
funkcjonowaćStudent(Imię / Płeć) {
Ten.nazwa = nazwa;
Ten.płeć = płeć;
Tenwiek = 19;
}
Wszystkie obiekty utworzone z powyższego będą miały wiek Ustawić 19. Możesz zaprojektować swojego konstruktora w ten sposób, jeśli istnieje właściwość, którą mają mieć wszystkie obiekty.
Możesz teraz definiować unikalne obiekty z tego samego konstruktora, przekazując różne argumenty.
Argumenty sprawiają, że konstruktorzy są bardziej elastyczni. Oszczędzają czas i zachęcają do czystego kodu.
Definiowanie metod obiektowych
Metoda jest właściwością obiektu, która jest funkcją. Metody ulepszają twój kod w OOP, ponieważ dodają różne zachowania do twoich obiektów. Oto przykład:
funkcjonowaćStudent(Imię / Płeć) {
Ten.nazwa = nazwa;
Ten.płeć = płeć;
Tenwiek = 19 ;
Ten.powiedz Imię = funkcjonować () {
powrót`Nazywam się ${nazwa}`;
}
}
Powyższe dodaje funkcję Powiedz Imię do konstruktora.
Załóżmy, że używasz tego konstruktora do tworzenia obiektu, który przechowujesz w zmiennej, studentka. Następnie możesz wywołać tę funkcję za pomocą poniższego kodu:
studentka.powiedz Imię()prototyp
Wcześniej stworzyliśmy Student w taki sposób, że wszystkie jego instancje będą miały wiek nieruchomość o wartości ok 19. Spowoduje to posiadanie zduplikowanej zmiennej dla każdego Student instancja, którą tworzysz.
Aby uniknąć tego powielania, JavaScript wykorzystuje koncepcję prototypów. Wszystkie obiekty utworzone z konstruktora współdzielą właściwości jego prototypu. Możesz dodać wiek nieruchomość do Student prototyp, jak pokazano poniżej:
uczeń.prototyp.wiek = 19;W ten sposób wszystkie wystąpienia Student będzie miał wiek nieruchomość. Deklarowanie właściwości prototypu to sposób na ograniczenie duplikatów kodu w aplikacji. Sprawia, że Twój kod jest tak standardowy, jak to tylko możliwe.
Właściwość prototypu może być obiektem
Właściwości prototypu można dodawać pojedynczo, jak wyjaśniono powyżej. Ale jeśli masz wiele właściwości do dodania, może to być niewygodne.
Alternatywnie możesz zawrzeć wszystkie wymagane właściwości w nowym obiekcie. W ten sposób ustawisz wszystkie właściwości jednocześnie. Na przykład:
uczeń.prototyp = {
wiek: 19 lat,
wyścig: "Biały",
inwalidztwo: "Nic"
}Pamiętaj o ustawieniu konstruktor właściwość podczas ustawiania prototypów na nowy obiekt.
uczeń.prototyp = {
konstruktor: Student,
wiek: 19 lat,
wyścig: "Biały",
inwalidztwo: "Nic"
}Możesz użyć tej właściwości, aby sprawdzić, która funkcja konstruktora utworzyła instancję.
Nadtypy i dziedziczenie
Dziedzictwo to metoda stosowana przez programistów w celu zmniejszenia liczby błędów w ich aplikacjach. To sposób na trzymanie się Nie powtarzaj się (DRY) zasada.
Załóżmy, że masz dwóch konstruktorów —Student I Nauczyciel— które mają dwie podobne właściwości prototypu.
uczeń.prototyp = {
konstruktor: Student,powiedzImię: funkcjonować () {
powrót`Nazywam się ${nazwa}`;
}
}Nauczyciel.prototyp = {
konstruktor: Nauczyciel,
powiedzImię: funkcjonować () {
powrót`Nazywam się ${nazwa}`;
}
}
Oba te konstruktory definiują Powiedz Imię sposób, identycznie. Aby uniknąć tego niepotrzebnego powielania, możesz utworzyć plik nadtyp.
funkcjonowaćIndywidualne szczegóły(){};IndywidualneSzczegóły.prototype = {
konstruktor: IndywidualneSzczegóły,
powiedzImię: funkcjonować () {
powrót`Nazywam się ${nazwa}`;
}
};
Następnie możesz usunąć Powiedz Imię od obu konstruktorów.
Aby odziedziczyć właściwości z nadtypu, użyj Obiekt.utwórz(). Ustawiasz prototyp obu konstruktorów na instancję nadtypu. W tym przypadku ustawiamy Student I Nauczyciel prototypy do instancji IndividualDetails.
Tutaj jest to:
uczeń.prototyp = Obiekt.create (IndividualDetails.prototype);
Nauczyciel.prototyp = Obiekt.create (IndividualDetails.prototype);Robiąc to, Student I Nauczyciel dziedziczą wszystkie właściwości nadtypu, Indywidualne szczegóły.
Oto jak ćwiczyć DRY w OOP przy użyciu nadtypów.
Konstruktorzy zmieniają zasady gry
Konstruktory są kluczowym elementem języka JavaScript, a opanowanie ich funkcjonalności ma kluczowe znaczenie dla tworzenia aplikacji OOP JavaScript. Możesz użyć konstruktora do tworzenia obiektów, które współużytkują właściwości i metody. Możesz także użyć dziedziczenia do zdefiniowania hierarchii obiektów.
W ES6 możesz użyć klasa słowo kluczowe do zdefiniowania klasycznych klas zorientowanych obiektowo. Ta wersja JavaScript obsługuje również konstruktor słowo kluczowe.
