JavaScriptin luokat

ECMAScript 2015, myös tunnettu nimellä ES6, tuotti mukanaan JavaScript-luokat.

JavaScript-luokka on JavaScript-objektien malli.

JavaScript-luokan syntaksi

Käytä avainsanaa class Luo luokka.

Lisää aina nimi constructor() menetelmä:

Syntaksi

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

Esimerkki

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

Yllä olevassa esimerkissä luotiin nimi "Car" sisältävä luokka.

Luokalla on kaksi alkuperäistä ominaisuutta: "name" ja "year".

JavaScriptin luokatEi oleobjekti.

Se on JavaScript-objektiMalli.

Luokan käyttö

Kun sinulla on luokka, voit käyttää sitä luodaksesi objekteja:

Esimerkki

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

Kokeile itse

Yllä olevassa esimerkissä käytettiin Car-luokkaaluodaksesi kaksi Car-objekti.

Rakentaja kutsutaan automaattisesti uuden objektin luonnin yhteydessä (constructor method).

Rakentaja

Rakentaja on erityinen metodi:

  • Se on pakollinen nimen "constructor"
  • Suoritetaan automaattisesti luodessa uuden objektin
  • Käytetään objektin ominaisuuksien alustamiseen
  • Jos et määrittele rakentajaa, JavaScript lisää tyhjän rakentajan.

Luokan metodi

Luokan metoden syntaksi on sama kuin objektin metoden.

Luo luokka avainsanalla class.

Varmista aina, että lisäät constructor() -menetelmän.

Lisää sitten minkä määrän menetelmiä tahansa.

Syntaksi

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

Luo nimi "age" sisältävä luokan metodi, joka palauttaa auton ikävuodet:

Esimerkki

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 =
"My car is " + myCar.age() + " years old.";

Kokeile itse

Voit lähettää parametreja luokan menetelmille:

Esimerkki

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=
"My car is " + myCar.age(year) + " years old.";

Kokeile itse

Selaintuki

Seuraavassa taulukossa mainitaan ensimmäinen täysin JavaScript-luokan tukema selainversio:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Maaliskuu 2016 heinä 2015 Maaliskuu 2016 lokakuu 2015 Maaliskuu 2016

"use strict"

Luokan syntaksin on kirjoitettava 'tiukka tila' -tilassa.

Jos et noudata 'tiukkaa tilaa' -sääntöjä, saat virheilmoituksen.

Esimerkki

Tiukassa tilassa, jos käytät muuttujaa ilman sen määrittämistä, saat virheen:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Tämä ei toimii
    let date = new Date(); // Tämä toimii
    return date.getFullYear() - this.year;
  }
}

Kokeile itse

Tässä JS-tiukka tila Tutustu tarkemmin 'tiukka tila' -aiheeseen täällä.