Jak vytvářet a používat třídy JavaScriptu [Příklady]

Tento kurz vysvětlí třídy JavaScriptu a jak souvisí s objekty . Jsou uvedeny příklady syntaxe a kódu.

Nejdřív ale rychlé osvěžení objektů JavaScriptu.

Objekty JavaScript

V JavaScriptu jsou objekty kontejnerem pro sadu vlastností a metod.

Jako objekt lze modelovat například auto. Může mít vlastnosti popisující výrobce , rok výroby a barvu .

Metody jsou funkce, které jsou součástí objektu, které při volání nějakým způsobem interagují s objektem. Auto může mít troubení metoda, která spustí upozornění, nebo pohon metoda, která mění svou pozici.

var myHonda = {
    manufacturer: "honda",
    year: "2002",
    colour: "yellow"
};

Nahoře je vytvořen JavaScriptový objekt popisující žluté auto Honda z roku 2002. Objekty mohou mít libovolný počet nebo vlastnosti a metody.

Třídy JavaScriptu

Objekty nemají žádnou pevnou strukturu – vlastnosti lze přidávat a odstraňovat nebo u některých objektů existují a u jiných nikoli. Třídy poskytují šablonu pro vytváření objektů s přednastaveným seznamem vlastností a mohou zahrnovat přednastavené metody.

Všechny objekty vytvořené pomocí této třídy budou mít tyto vlastnosti a metody k dispozici – naplněné jedinečnými hodnotami pro daný objekt

Vytváření/definování tříd a vlastností

Třídy jsou druhem funkce – funkcí, které vytvářejí objekty.

Každá třída by měla mít konstruktor metoda. Tato metoda se volá při vytváření objektu pomocí třídy a nastavuje vlastnosti třídy. Vlastnosti definované v konstruktoru jsou předdefinované vlastnosti pro danou třídu.

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

Existují další způsoby, jak vytvářet třídy, jak je uvedeno v dokumentech Mozilla Developer Network.

Metody třídy

Metody, funkce obsažené ve třídě, lze také přidat do definice třídy. Používají standardní syntaxi funkcí a mohou být jednoduše uvedeny za konstruktorem v definici třídy.

class Car {
    constructor(manufacturer, year, colour) {
        this.manufacturer = manufacturer;
        this.year = year;
        this.colour = colour;
    }
    honk(){
        //Code to honk here
    }
    drive(direction){
        //Code to drive here
    }
}

Vytváření objektů z tříd

Nové objekty se vytvářejí pomocí nové klíčové slovo následované názvem třídy a vlastnostmi v pořadí, v jakém jsou definovány v konstruktoru.

let myHonda = new Car("honda", "2002", "yellow");

Výše uvedené vytvoří žlutý objekt Honda z roku 2002 třídy Auto .

Třídy jsou navrženy tak, aby je bylo možné znovu použít, aby vytvářely konzistentní objekty, které se všechny chovají stejným způsobem. Ze třídy můžete vytvořit tolik objektů, kolik chcete.

let myHonda = new Car("honda", "2002", "yellow");
let myToyota = new Car("toyota", "1987", "red");

Přístup k vlastním vlastnostem objektu pomocí „toto“?

Jak je vidět ve funkcích konstruktoru výše, když objekt odkazuje sám na sebe, používá toto klíčové slovo. toto neodkazuje na třídu, ale na individuální objekt této třídy.

Další informace o „tomto“ v JavaScriptu si přečtěte zde.

Níže byla přidána nová metoda, která používá toto pro aktualizaci barvy vozu:

class Car {
    constructor(manufacturer, year, colour) {
        this.manufacturer = manufacturer;
        this.year = year;
        this.colour = colour;
    }
    honk(){
        //Code to honk here
    }
    drive(direction){
        //Code to drive here
    }
    changeColour(colour){
        this.colour = colour;
    }
}