JavaScript Klasser

ECMAScript 2015, också känd som ES6, introducerade JavaScript-klasser.

JavaScript-klasser är mönster för JavaScript-objekt.

JavaScript-klasser

syntaks

Använd nyckelordet class Skapa en klass.

Lägg alltid till namnet constructor() metoder:

syntaks

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

instans

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

Ovanstående exempel skapar en klass vid namn "Car".

Klassen har två initiala egenskaper: "name" och "year".

JavaScript KlasserInteobjekt.

Det är bara en JavaScript-objektetsMall.

Använd klass

Om du har en klass, kan du använda den för att skapa objekt:

instans

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

Prova själv

Ovanstående exempel använder Car-klassskapade två Car-objekt.

Metoden constructor anropas automatiskt när ett nytt objekt skapas.

Konstruktionsmetod

Konstruktionsmetoder är en speciell metod:

  • Den måste ha exakt namnet "constructor"
  • Körs automatiskt när ett nytt objekt skapas
  • Används för att initiera objektets egenskaper
  • Om konstruktionsmetoden inte är definierad, lägger JavaScript till en tom konstruktionsmetod.

Classmetoder

Skapande av klassmetoder

syntaks

Lika som objektmetoder.

Använd nyckelordet class Skapa en klass.

Lägg alltid till constructor() metoder.

Lägg sedan till ett obegränsat antal metoder.

syntaks

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

Skapa en klassmetod vid namn "age" som returnerar bilens ålder:

instans

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 är " + myCar.age() + " år gammal.";

Prova själv

Du kan skicka parametrar till klassmetoder:

instans

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 är " + myCar.age(year) + " år gammal.";

Prova själv

Webbläsarstöd

Följande tabell anger den första webbläsarversionen som helt stöder JavaScript-klasser:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Mars 2016 Juli 2015 Mars 2016 Oktober 2015 Mars 2016

I denna handledning kommer du att lära dig mer om JavaScript-klasser.