Klasy React ES6
Klasy
ES6 wprowadził klasy.
Klasa jest rodzajem funkcji, ale zamiast używać słowa kluczowego
functiondo jej inicjowania, używamy słowa kluczowego
class, a właściwości są przypisywane wewnątrz
constructor()metody.
Przykład
Prosty konstruktor klas:
class Car {
constructor(name) {
this.brand = name;
}
}
Zwróć uwagę na wielkość liter w nazwie klasy. Nazwę „Samochód” rozpoczęliśmy od wielkiej litery. Jest to standardowa konwencja nazewnictwa klas.
Teraz możesz tworzyć obiekty za pomocą klasy Car:
Przykład
Utwórz obiekt o nazwie „mycar” na podstawie klasy Car:
class Car {
constructor(name) {
this.brand = name;
}
}
const mycar = new Car("Ford");
Uwaga: Funkcja konstruktora jest wywoływana automatycznie podczas inicjowania obiektu.
Zostać certyfikowanym!
95 $ ZAPISZ
Metoda w klasach
Możesz dodać własne metody w klasie:
Przykład
Utwórz metodę o nazwie „present”:
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
const mycar = new Car("Ford");
mycar.present();
Jak widać w powyższym przykładzie, wywołujesz metodę, odwołując się do nazwy metody obiektu, po której następuje nawias (parametry zostaną umieszczone wewnątrz nawiasów).
Dziedziczenie klas
Aby utworzyć dziedziczenie klasy, użyj extends
słowa kluczowego.
Klasa utworzona z dziedziczeniem klas dziedziczy wszystkie metody z innej klasy:
Przykład
Utwórz klasę o nazwie „Model”, która odziedziczy metody z klasy „Car”:
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
class Model extends Car {
constructor(name, mod) {
super(name);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model
}
}
const mycar = new Model("Ford", "Mustang");
mycar.show();
Metoda super()odnosi się do klasy nadrzędnej.
Wywołując super()metodę w metodzie konstruktora, wywołujemy metodę konstruktora rodzica i uzyskujemy dostęp do właściwości i metod rodzica.
Aby dowiedzieć się więcej o klasach, zapoznaj się z naszą sekcją Klasy JavaScript .