JavaScript Classes

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

JavaScript klasse er et mønster for JavaScript-objekter.

JavaScript klasse

syntaks

Brug nøgordet class Opret en klasse.

Tilføj altid navnet constructor() metoder:

syntaks

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

eksempel

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

I det foregående eksempel blev der oprettet en klasse med navnet "Car".

Klassen har to grundlæggende egenskaber: "name" og "year".

JavaScript ClassesIkkeobjekt.

Det er bare en JavaScript-objektMuster。

Brug af klasse

Hvis du har en klasse, kan du bruge klassen til at oprette objekter:

eksempel

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

Prøv det selv

I det foregående eksempel bruges Car klasseblev oprettet to Car objekt。

Constructor metoden kaldes automatisk ved oprettelse af nyt objekt.

Constructor metode

Constructor metoden er en speciel metode:

  • Den skal have præcis navnet "constructor"
  • Kører automatisk ved oprettelse af nyt objekt
  • Bruges til at initialisere objektets egenskaber
  • Hvis konstruktormetoden ikke er defineret, tilføjer JavaScript en tom konstruktormetode.

Class metoder

Oprettelse af klassemetoder

syntaks

Som objektmetoder.

Brug nøgordet class Opret en klasse.

Tilføj altid constructor() metoder.

Føj derefter et hvilket som helst antal metoder.

syntaks

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

Opret en klassemetode med navnet "age", som 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 klassemetoderne:

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

Browserunderstø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
Marts 2016 Juli 2015 Marts 2016 Oktober 2015 Marts 2016

I dette tutorial vil du lære mere om JavaScript klasser.