Klasy JavaScript
ECMAScript 2015, znany również jako ES6, wprowadził klasy JavaScript.
Klasy JavaScript to szablony obiektów JavaScript.
Składnia klas JavaScript
Użyj słowa kluczowego class, aby utworzyć klasę.
Zawsze dodawaj metodę o nazwie constructor():
Składnia
class ClassName {
constructor() { ... }
}
Przykład
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Powyższy przykład tworzy klasę o nazwie „Car”.
Klasa ma dwie początkowe właściwości: „nazwa” i „rok”.
Klasa JavaScript nie jest obiektem.
Jest to szablon dla obiektów JavaScript.
Korzystanie z klasy
Kiedy masz klasę, możesz jej użyć do tworzenia obiektów:
Przykład
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
Powyższy przykład używa klasy Car do utworzenia dwóch obiektów Car .
Metoda konstruktora jest wywoływana automatycznie podczas tworzenia nowego obiektu.
Metoda Konstruktora
Metoda konstruktora to metoda specjalna:
- Musi mieć dokładną nazwę „konstruktor”
- Jest wykonywany automatycznie, gdy tworzony jest nowy obiekt
- Służy do inicjalizacji właściwości obiektu
Jeśli nie zdefiniujesz metody konstruktora, JavaScript doda pustą metodę konstruktora.
Metody klas
Metody klas są tworzone przy użyciu tej samej składni, co metody obiektowe.
Użyj słowa kluczowego class, aby utworzyć klasę.
Zawsze dodawaj constructor()metodę.
Następnie dodaj dowolną liczbę metod.
Składnia
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Utwórz metodę klasy o nazwie „wiek”, która zwraca wiek samochodu:
Przykład
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
Możesz przesłać parametry do metod klasy:
Przykład
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new
Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is
" + myCar.age(year) + " years old.";
Obsługa przeglądarki
Poniższa tabela definiuje pierwszą wersję przeglądarki z pełną obsługą klas w JavaScript:
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
„użyj ścisłego”
Składnia w klasach musi być napisana w „trybie ścisłym”.
Otrzymasz błąd, jeśli nie będziesz przestrzegać zasad „trybu ścisłego”.
Przykład
W „trybie ścisłym” otrzymasz błąd, jeśli użyjesz zmiennej bez jej deklarowania:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
let date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}
Dowiedz się więcej o „trybie ścisłym” w: JS Strict Mode .