JavaScript-klasser


Innehållsförteckning

    Visa innehållsförteckning

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

JavaScript-klasser är mallar för JavaScript-objekt.

JavaScript-klasssyntax

Använd nyckelordet klass för att skapa en klass.

Lägg alltid till en metod som heter constructor():

Syntax

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

Exempel

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

Exemplet ovan skapar en klass som heter "Bil".

Klassen har två initiala egenskaper: "namn" och "år".

En JavaScript-klass är inte ett objekt.

Det är en mall för JavaScript-objekt.


Använda en klass

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

Exempel

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

Prova själv →

<!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>

Exemplet ovan använder Car-klassen för att skapa två Car-objekt.

Konstruktormetoden anropas automatiskt när ett nytt objekt skapas.


Konstruktörsmetoden

Konstruktormetoden är en speciell metod:

  • Den måste ha det exakta namnet "konstruktör"

  • Det exekveras automatiskt när ett nytt objekt skapas

  • Den används för att initiera objektegenskaper

Om du inte definierar en konstruktormetod, JavaScript kommer att lägga till en tom konstruktormetod.



Klassmetoder

Klassmetoder skapas med samma syntax som objektmetoder.

Använd nyckelordet klass för att skapa en klass.

Lägg alltid till en constructor()-metod.

Lägg sedan till valfritt antal metoder.

Syntax

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

Skapa en klassmetod som heter "ålder", som returnerar bilåldern:

Exempel

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.";

Prova själv →

<!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 skicka parametrar till klassmetoder:

Exempel

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."; 

Prova själv →

<!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>

Webbläsarstöd

Följande tabell definierar den första webbläsarversionen med fullt stöd för 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"

Syntaxen i klasser måste skrivas i "strikt läge".

Du kommer att få en fel om du inte följer reglerna för "strikt läge".

Exempel

I "strikt läge" får du ett felmeddelande om du använder en variabel utan förklarar 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;
   }
}

Prova själv →

<!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 dig mer om "strikt läge" i: JS Strict Mode.