Klasy w JavaScript

ECMAScript 2015, znany również jako ES6, wprowadził klasy JavaScript.

Klasy JavaScript są szablonem obiektów JavaScript.

Gramatyka klas JavaScript

Użyj kluczowego słowa class Utwórz klasę.

Zawsze dodawaj nazwę constructor() metody:

Gramatyka

class ClassName {
  constructor() { ... }
}

Przykład

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

Powyższy przykład utworzył klasę o nazwie "Car".

Ta klasa ma dwie początkowe właściwości: "name" i "year".

Klasy w JavaScriptNie jestObiekt.

To jest obiekt JavaScript.Szablon.

Użycie klasy

Kiedy masz klasę, możesz użyć jej do tworzenia obiektów:

Przykład

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

Spróbuj sam

Powyższy przykład używa klasy Caraby utworzyć dwa Obiekt Car.

Metoda konstruktora (constructor method) jest automatycznie wywoływana podczas tworzenia nowego obiektu.

Metoda konstruktora

Metoda konstruktora jest specjalnym rodzajem metody:

  • Musisz użyć dokładnej nazwy "constructor"
  • Automatycznie wykonywane podczas tworzenia nowego obiektu
  • Używane do inicjalizacji właściwości obiektu
  • Jeśli nie zdefiniowałeś metody konstruktora, JavaScript doda pustą metodę konstruktora.

Metody klasy

Gramatyka tworzenia metod klasy jest taka sama jak metod obiektowych.

Użyj kluczowego słowa class do utworzenia klasy.

Zawsze dodawaj metodę constructor().

Następnie dodaj dowolną liczbę metod.

Gramatyka

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Utwórz metodę klasy o nazwie "age", 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 =
"Mój samochód ma " + myCar.age() + " lat.";

Spróbuj sam

Możesz wysłać parametry do metod klasy:

Przykład

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    zwróć x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"Mój samochód ma " + myCar.age(year) + " lat.";

Spróbuj sam

Obsługa przeglądarek

Poniżej znajduje się tabela z pierwszą wersją przeglądarki, która w pełni obsługuje klasy JavaScript:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Marzec 2016 roku Lipiec 2015 roku Marzec 2016 roku Październik 2015 roku Marzec 2016 roku

"use strict"

Gramatyka klas musi być napisana w trybie rygorystycznym.

Jeśli nie przestrzegasz zasad trybu rygorystycznego, otrzymasz komunikat o błędzie.

Przykład

W trybie rygorystycznym, jeśli używasz zmiennej, która nie została zadeklarowana, uzyskasz błąd:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // To nie będzie działać
    let date = new Date(); // To będzie działać
    return date.getFullYear() - this.year;
  }
}

Spróbuj sam

W Tryb rygorystyczny JS Dowiedz się więcej o 'tryb rygorystyczny' tutaj.