Klasy ES6

JavaScript jest jednym z najpopularniejszych języków programowania na świecie, a jego popularność ciągle rośnie. Wraz z wydaniem standardu ES6 (ECMAScript 2015) pojawiły się liczne zmiany w klasach, które ułatwiły tworzenie i zarządzanie obiektami w JavaScript. W tym artykule omówimy te zmiany i jak wpłynęły na programowanie w JavaScript.

JavaScript

React

Nauka

Sprawdź również moje inne projekty :)

Spis treści:

- Klasy w ES5
- Klasy w ES6
- Dziedziczenie w ES6
- Podsumowanie

14 maja 2023

Tak naprawdę zasada działania klas jest identyczna jak w przypadku tworzenia klas za pomocą konstruktora. Umożliwiają one jedynie łatwiejszy (czytelniejszy) zapis dla definiowania property oraz metod, które mają zostać dziedziczone przez kolejno tworzone instancje klasy.

Klasy w ES5

W JavaScript przed ES6 nie było wbudowanego sposobu na tworzenie klas. Zamiast tego, używano funkcji konstruktora do tworzenia obiektów i dziedziczenia. Przykładowo, aby utworzyć klasę "Person", możemy napisać następujący kod:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
};

W tym kodzie, definiujemy funkcję konstruktora "Person", która tworzy nowy obiekt z właściwościami "name" i "age". Aby dodać metodę do klasy, musimy użyć prototypu funkcji konstruktora.

Klasy w ES6

Wraz z wydaniem standardu ES6, dodano składnię klas do języka JavaScript. Składnia ta zapewnia bardziej intuicyjny sposób na tworzenie klas i dziedziczenie.

Przykładowo, aby utworzyć klasę "Person" w ES6, możemy napisać następujący kod:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

W tym kodzie, definiujemy klasę "Person" z konstruktorem i metodą "sayHello". Zamiast używać prototypu, możemy definiować metody bezpośrednio w ciele klasy.

Dziedziczenie w ES6

Dziedziczenie w JavaScript przed ES6 było realizowane poprzez prototypowanie. Przykładowo, aby utworzyć klasę "Student" dziedziczącą po klasie "Person", musimy napisać następujący kod:

function Student(name, age, grade) {
  Person.call(this, name, age);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.sayGrade = function() {
  console.log(`My grade is ${this.grade}.`);
};

W tym kodzie, definiujemy funkcję konstruktora "Student", która dziedziczy po funkcji konstruktora "Person". Aby zdefiniować metodę "sayGrade", dla klasy "Student", musimy dodać:

class Student {
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }

  sayName() {
    console.log(`My name is ${this.name}.`);
  }

  sayGrade() {
    console.log(`My grade is ${this.grade}.`);
  }
}

W tym przykładzie klasa "Student" ma teraz dwie metody: "sayName" i "sayGrade". Metoda "sayName" wyświetla nazwę studenta, a metoda "sayGrade" wyświetla ocenę studenta. Możemy teraz utworzyć nowego studenta i wywołać te metody:

const student = new Student('John', 'A');
student.sayName(); // My name is John.
student.sayGrade(); // My grade is A.

Podsumowanie

Słowo kluczowe class zostało wprowadzone jako składnia do definiowania klas, co ułatwia tworzenie nowych klas.
Metody w klasach są teraz zapisywane w formie skróconej i są bardziej czytelne. Zamiast tworzyć funkcję i przypisywać ją do prototypu, metody są definiowane bezpośrednio w ciele klasy.
Wprowadzono nowy rodzaj metody zwanej konstruktorem, która jest uruchamiana podczas tworzenia nowej instancji klasy. Konstruktor jest teraz prostszy w użyciu i nie trzeba go przypisywać do prototypu.
Dzięki dodaniu słowa kluczowego extends klasa może dziedziczyć właściwości i metody z innej klasy.
Dostępne są teraz słowa kluczowe get i set, które pozwalają na ustawienie i pobranie wartości właściwości klasy.
Dodano również statyczne metody i właściwości, które są dostępne na poziomie klasy, a nie na poziomie instancji.

...powrót