JavaScript Classes

ECMAScript 2015, også kendt som ES6, introducerede JavaScript klasser.

JavaScript klasser er skabeloner for JavaScript objekter.

JavaScript klassens syntaks

Brug nøgordet class Opret en klasse.

Tilføj altid en constructor() metoder:

Syntaks

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

Eksempel

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

Eksemplet opretter en klasse kaldet "Car".

Klassen har to indledende egenskaber: "name" og "year".

JavaScript ClassesIkkeobjekt.

Det er en JavaScript-objektSkabelon.

Brug af klasse

Når du har en klasse, kan du bruge den til at oprette objekter:

Eksempel

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

Prøv det selv

Eksemplet bruger Car-klassefor at oprette to Car-objekt.

Kaldes automatisk, når et nyt objekt oprettes (constructor method).

Konstruktormetode

Konstruktormetoden er en speciel metode:

  • Den skal have det præcise navn "constructor"
  • Kører automatisk ved oprettelse af nyt objekt
  • Bruges til at initialisere objektets egenskaber
  • Hvis du ikke definerer en konstruktormetode, tilføjer JavaScript en tom konstruktormetode.

Klassemetoder

Syntaksen for klassemetoder er den samme som for objektmetoder.

Brug nøgordet class til at oprette en klasse.

Tilføj altid constructor() metoden.

Tilføj derefter et hvilket som helst antal metoder.

Syntaks

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

Opret en metode kaldet "age", der returnerer bilens alder:

Eksempel

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 =
"Min bil er " + myCar.age() + " år gammel.";

Prøv det selv

Du kan sende parametre til klassemetoder:

Eksempel

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=
"Min bil er " + myCar.age(year) + " år gammel.";

Prøv det selv

Browser-understøttelse

Følgende tabel angiver den første browserversion, der fuldt ud understøtter JavaScript-klasser:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
2016 år 3 måned 2015 år 7 måned 2016 år 3 måned 2015 år 10 måned 2016 år 3 måned

"use strict"

Syntaks i klasser skal skrives i 'strengt tilstand'.

Hvis du ikke følger 'strengt tilstand'-reglerne, modtager du en fejlmeddelelse.

Eksempel

Under 'strengt tilstand', hvis du bruger en variabel uden at erklære den, får du en fejl:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Dette vil ikke fungere
    let date = new Date(); // Dette vil fungere
    return date.getFullYear() - this.year;
  }
}

Prøv det selv

i JS-strengt tilstand Lær mere om 'strengt tilstand' her.