ECMAScript 2015, även känd som ES6, introducerade JavaScript-klasser.
JavaScript-klasser är mallar för JavaScript-objekt.
Använd nyckelordet klass
för att skapa en klass.
Lägg alltid till en metod som heter constructor()
:
class ClassName {
constructor() { ... }
}
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.
När du har en klass kan du använda klassen för att skapa objekt:
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.
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 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.
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Skapa en klassmetod som heter "ålder", som returnerar bilåldern:
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:
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>
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 |
Du kommer att lära dig mycket mer om JavaScript-kurser senare i den här handledningen.