JavaScript Klasser

ECMAScript 2015，也称为 ES6，引入了 JavaScript 类。

JavaScript 类是 JavaScript 对象的模板。

JavaScript 类的语法

Använd nyckelordet class Skapa en klass.

Lägg alltid till en metod med namnet constructor() metoder:

Syntax

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

Exempel

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

Exempeln ovan skapar en klass med namnet "Car".

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

JavaScript KlasserInteobjekt.

Det är en JavaScript-objektMall.

Använd klass

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

Exempel

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

Prova själv

Exempeln ovan använder Car-klassatt skapa två Car-objekt.

Konstruktormetoden (constructor method) anropas automatiskt när ett nytt objekt skapas.

Konstruktormetod

Konstruktormetoden är en speciel metod:

  • Den måste ha det exakta namnet "constructor"
  • Körs automatiskt när ett nytt objekt skapas
  • Används för att initialisera objektets egenskaper
  • Om du inte definierar en konstruktormetod, lägger JavaScript till en tom konstruktormetod.

Klassmetoder

Syntaksen för klassmetoder är samma som för objektmetoder.

Skapa en klass med nyckelordet class.

Lägg alltid till metoden constructor().

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

Syntax

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

Skapa en metod "age" som returnerar bilåret:

Exempel

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:

Exempel

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

Tabellen anger den första webbläsaren som helt stöder JavaScript-klasser:

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

"use strict"

Syntaksen i klassen måste skrivas i "strict mode".

Om du inte följer "strict mode"-reglerna får du ett felmeddelande.

Exempel

Under "strict mode" får du ett fel om du använder en variabel utan att deklarera den:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Detta kommer inte att fungera
    let date = new Date(); // Detta kommer att fungera
    return date.getFullYear() - this.year;
  }
}

Prova själv

i JS-strict mode Lär dig mer om "strict mode" här.