5.1 Deklaracja klasy
Z wprowadzeniem ECMAScript 6 (ES6) w JavaScript pojawiła się nowa struktura do tworzenia obiektów i zarządzania dziedziczeniem — słowo kluczowe class. Klasy oferują wygodniejszą i bardziej zrozumiałą składnię do tworzenia obiektów i pracy z prototypami.
Klasy w JavaScript — to syntaktyczny cukier nad istniejącym systemem dziedziczenia prototypowego. Ułatwiają tworzenie i zarządzanie obiektami, czyniąc je bardziej zrozumiałymi i strukturalnymi.
Deklaracja klasy
Klasa w JavaScript deklarowana jest przy użyciu słowa kluczowego class, po którym następuje nazwa klasy. Ciało klasy jest zamknięte w nawiasach klamrowych {}.
Przykład:
class Person {
// Metoda klasy
greet() {
console.log('Hello!');
}
}
// Tworzenie instancji klasy
const person = new Person();
person.greet(); // Wyświetli: Hello!
Wyrażenie klasy
Klasy mogą być deklarowane zarówno przez deklarację, jak i przez wyrażenie. Wyrażenia klasowe mogą być nazwane lub anonimowe.
Przykład nazwanej klasy:
const Person = class PersonClass {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // Wyświetli: Hello!
Przykład anonimowej klasy:
const Person = class {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // Wyświetli: Hello!
5.2 Pola i metody klas
Właściwości klas
Właściwości klas w ES6 można deklarować tylko wewnątrz konstruktora. Jednak w nowszych wersjach JavaScript (ES2022) wprowadzono pola klas, pozwalające deklarować właściwości poza konstruktorem.
Przykład użycia właściwości w konstruktorze:
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
Przykład użycia pól klas (ES2022):
class User {
username = 'default_username';
email = 'default@example.com';
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
Wyjaśnienie:
- W pierwszym przykładzie właściwości
usernameiemailsą deklarowane i inicjalizowane wewnątrz konstruktora - W drugim przykładzie właściwości
usernameiemailsą deklarowane poza konstruktorem jako pola klasy
Metody klasy
Klasa może zawierać metody, które są definiowane wewnątrz ciała klasy. Te metody są automatycznie dodawane do prototypu tworzonych obiektów.
Przykład metod klasy:
class Animal {
speak() {
console.log('Animal speaks');
}
eat() {
console.log('Animal eats');
}
}
const animal = new Animal();
animal.speak(); // Wyświetli: Animal speaks
animal.eat(); // Wyświetli: Animal eats
3.3 Przykłady użycia klas
Tworzenie złożonych obiektów
Klasy pozwalają na tworzenie złożonych obiektów z różnymi metodami i właściwościami.
Przykład:
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
startEngine() {
console.log(`${this.brand} ${this.model} engine started.`);
}
stopEngine() {
console.log(`${this.brand} ${this.model} engine stopped.`);
}
}
const myCar = new Car('Toyota', 'Camry');
myCar.startEngine(); // Wyświetli: Toyota Camry engine started.
myCar.stopEngine(); // Wyświetli: Toyota Camry engine stopped.
GO TO FULL VERSION