JavaScript klasser

Indholdsfortegnelse

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

JavaScript-klasser er skabeloner til JavaScript-objekter.

JavaScript-klassesyntaks

Brug søgeordet klasse til at oprette en klasse.

Tilføj altid en metode med navnet constructor():

Syntaks

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

Eksempel

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

Eksemplet ovenfor opretter en klasse med navnet "Bil".

Klassen har to indledende egenskaber: "navn" og "år".

En JavaScript-klasse er ikke et objekt.

Det er en skabelon til JavaScript-objekter.

Brug af en klasse

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

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

<p id="demo"></p>

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

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

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

Eksemplet ovenfor bruger Car-klassen til at oprette to Car-objekter.

Konstruktørmetoden kaldes automatisk, når et nyt objekt oprettes.

Konstruktørmetoden

Konstruktørmetoden er en speciel metode:

Det skal have det nøjagtige navn "konstruktør"
Det udføres automatisk, når et nyt objekt oprettes
Det bruges til at initialisere objektegenskaber

Hvis du ikke definerer en konstruktørmetode, JavaScript vil tilføje en tom konstruktørmetode.

Klasse metoder

Klassemetoder oprettes med samme syntaks som objektmetoder.

Brug søgeordet klasse til at oprette en klasse.

Tilføj altid en constructor()-metode.

Tilføj derefter et vilkårligt antal metoder.

Syntaks

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

Opret en klassemetode med navnet "alder", der returnerer bilalderen:

Eksempel

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
   }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
   }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Methods</h1>
<p>How to define and use a Class method.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;

  }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>

</body>
</html>

Du kan sende parametre til klassemetoder:

Eksempel

class Car {
  constructor(name, year) {
    
  this.name = name;
    this.year = year;
  }
  
  age(x) {
    return x - this.year;
  }
}

  const date = new Date();
  let year = date.getFullYear();
const myCar = new 
  Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is 
  " + myCar.age(year) + " years old.";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Method</h1>
<p>Pass a parameter into the "age()" method.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

const date = new Date();
let year = date.getFullYear();

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
</script>

</body>
</html>

Browser support

Følgende tabel definerer den første browserversion med fuld understøttelse af Klasser i JavaScript:


Chrome 49	Edge 12	Firefox 45	Safari 9	Opera 36
Mar, 2016	Jul, 2015	Mar, 2016	Oct, 2015	Mar, 2016

"use strict"

Syntaksen i klasser skal skrives i "streng mode".

Du får en fejl, hvis du ikke følger reglerne for "streng tilstand".

Eksempel

I "streng mode" vil du få en fejl, hvis du bruger en variabel uden erklærer det:

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
   }
  age() {
    // date = new Date();   // This will not work
    const date = new Date();  // This will work
    return date.getFullYear() - this.year;
   }
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes uses "strict mode"</h1>

<p>In a JavaScript Class you cannot use variable without declaring it.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;

  }
  age() {
   // date = new Date();  // This will not work
   const date = new Date(); // This will work
   return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>

</body>
</html>

Lær mere om "streng tilstand" i: JS streng tilstand.