JavaScript Nowa klasa

| | | | | |

JavaScript jest oparty na prototypach. Za każdym razem, gdy deklarujesz obiekt, tworzona jest właściwość prototypu, która rozszerza właściwości i metody związane z tym obiektem.

W ostatnich latach wielu programistów JavaScript szukało sposobów na zorientowanie obiektów do osadzenia. projektować obiekty w swoim kodzie. To zrodziło nowy typ obiektu w JavaScript zwany klasą, która rozszerza prototyp.

W tym przewodniku omówimy, czym są klasy, dlaczego są używane i jak można zaimplementować klasy w kodzie. Podamy przykład, od którego zaczniesz korzystać z klas.

Co to jest klasa JavaScript?

Klasy to sposób na zadeklarowanie modelu dla obiektu.

Jeśli znasz języki programowania obiektowego, wiesz, że są one w dużym stopniu zależne od klas i obiektów. Klasa jest jak szablon dla typu danych: mówi, jakie dane mogą być przechowywane i do jakich metod można uzyskać dostęp. Obiekt jest instancją tej klasy.

Przykładem klasy będzie Książka. Ta klasa zawierałaby plan, jakie informacje można przechowywać w księgach i jak te dane można zmienić. Obiektem może być tramwaj zwany pragnieniem, który jest pojedynczą książką.

W JavaScript klasy nazywamy cukrem składniowym. Składnia klas jest fajna, ale niekoniecznie dodają one nowe funkcje.

Klasy są powszechnie używane w nowoczesnych frameworkach JavaScript, takich jak React i Next.js.

lekcje związane z funkcjami

Jeśli pamiętasz jedną rzecz z tego artykułu, czy to ta: klasy to całkiem normalne funkcje

jedyną różnicą między klasą a wyrażeniem funkcyjnym jest sposób ich deklarowania, funkcje używają słowa kluczowego , a klasy używają klasy . technicznie słowo kluczowe, możesz zadeklarować klasę nawet bez użycia słowa kluczowego class

możemy powiedzieć, że są one takie same, tworząc dwie funkcje i drukując ich prototypy.

p>

Nasza klasa i wyrażenie funkcyjne zwracają:

funkcja ()

funkcja ()

dwie nasze funkcje i klasy używają tego samego odczytu łuku na podstawie prototypu.

Jak zdefiniować klasę? co jest świetnym pytaniem.

Możesz zdefiniować klasę za pomocą słowa kluczowego . Po zdefiniowaniu klasy możesz użyć funkcji konstruktora (), aby zainicjować ją z wartościami domyślnymi.

Otwórz konsolę JavaScript i wklej ten kod:.

p>

Tworzy to klasę o nazwie Książka. Nasza klasa może przechowywać dwie wartości, Title i Author, które zdefiniowaliśmy w naszej metodzie konstrukcji klasy. Aby utworzyć obiekt tej klasy, możemy użyć tego kodu:

Możemy pobrać wartości naszej klasy tak, jak każdy obiekt:

Nasz kod zwraca:. Jedną z zalet używania klas na prototypach jest możliwość zadeklarowania metody wewnątrz klasy. Oznacza to, że nie musisz używać składni prototyp, aby dodać nową metodę do istniejącej funkcji

Weźmy ten przykład:

Zadeklarowaliśmy metodę o nazwie GetDetails(), która istnieje w naszej klasie. To miłe, ponieważ utrzymuje cały nasz kod zgrupowany. Wywołujemy naszą funkcję GetDetails ():

Nasz kod zwraca:

pragnienie zwane tramwajem to książka napisana przez Tennessee Williamsa

Dziedziczenie lekcji

Jak w każdej strukturze obiektowej, klasy mogą dziedziczyć właściwości z innych klas.

Dziedziczenie odnosi się do procesu, w którym klasa potomna może uzyskać dostęp do metod i danych klasy nadrzędnej. Aby dziedziczyć z klasy, możesz użyć słowa kluczowego Extend. Utwórz plik JavaScript lub otwórz konsolę JavaScript i wklej ten kod:

Stworzyliśmy klasę zwaną fikcją, która używa klasy z książki, którą wcześniej zadeklarowaliśmy jako projekt. W naszym kodzie użyliśmy słowa kluczowego super(), aby odziedziczyć tytuł i wartości „Ęã‚ãod autora klasy nadrzędnej, którą jest Book. Tak więc zdefiniowaliśmy nowy atrybut, fiction, którego wartość jest domyślnie ustawiona na true

Stworzymy obiekt naszej nowej klasy beletrystyki.

Nasz kod zwraca: prawda. Klasa fikcji przechowuje element o nazwie fiction, który domyślnie jest prawdziwy. Jeśli spróbujemy uzyskać dostęp do tej wartości z instancji klasy Book, nic nie zostanie zwrócone. Rzeczywiście, "fikcja" jest dostępna w naszej klasie beletrystyki.

Getter i Setter

Pracując z klasami, musisz używać funkcji pobierających i ustawiających.

Funkcje Get umożliwiają pobieranie metod klasy. Funkcje ustawiające umożliwiają zmianę wartości określonego elementu w klasie. Funkcje te są wskazywane odpowiednio za pomocą słów kluczowych get i together

Rozważ następujący kod:.

W tym przykładzie zadeklarowaliśmy dwie metody o nazwie autor. Jedna z tych metod pozwala nam pobrać wartość autora; to jest nasza metoda pobierania. Druga metoda pozwala nam zmienić wartość autor

Możemy to zobaczyć w działaniu za pomocą następującego kodu:.

Nasz kod zwraca: Tennessee Williams

My zainicjował obiekt o nazwie tra m i nadał mu tytuł Tramwaj nazwany pożądaniem. Następnie mamy wartość autor Tennessee Williams używając kompozytora zdefiniowanego w naszym kodzie. Na koniec wydrukowaliśmy wartość autor na konsoli za pomocą play method.

Wnioski

Chociaż klasy nie odpowiadają nowej funkcjonalności JavaScript, ułatwiają pisanie funkcji, jeśli jesteś przyzwyczajony do programowania obiektowego.

Abstrakcyjne klasy projektowania oparte na prototypie JavaScript i sprawiające, że wydaje się on bardziej zorientowany obiektowo. Słowo „wygląd” ma kluczowe znaczenie, ponieważ pamiętaj, że klasy są funkcjami. Klasy to nic innego jak cukier składniowy.

Teraz możesz zacząć używać klas jak ekspert JavaScript!

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method