JavaScript osztályok

Tartalomjegyzék

Az ECMAScript 2015, más néven ES6 bevezette a JavaScript osztályokat.

A JavaScript osztályok a JavaScript objektumok sablonjai.

JavaScript osztály szintaxis

Osztály létrehozásához használja a class kulcsszót.

Mindig adjon hozzá egy constructor() nevű metódust:

Szintaxis

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

Példa

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

A fenti példa egy „Car” nevű osztályt hoz létre.

Az osztálynak két kezdeti tulajdonsága van: "név" és "év".

A JavaScript osztály nem objektum.

Ez egy sablon a JavaScript objektumokhoz.

Osztály használata

Ha van egy osztálya, az osztály segítségével objektumokat hozhat létre:

Példa

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

Próbálja ki Ön is →

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

A fenti példa az autóosztályt használja két autó objektum létrehozásához.

A konstruktor metódus automatikusan meghívásra kerül új objektum létrehozásakor.

A konstruktor módszer

A konstruktor módszer egy speciális módszer:

Pontosan a "konstruktor" nevének kell lennie
Új objektum létrehozásakor automatikusan végrehajtódik
Az objektum tulajdonságainak inicializálására szolgál

Ha nem ad meg konstruktor metódust, akkor JavaScript hozzáad egy üres konstruktor metódust.

Osztály módszerek

Az osztálymetódusok ugyanazzal a szintaxissal jönnek létre, mint az objektummetódusok.

Osztály létrehozásához használja a class kulcsszót.

Mindig adjon hozzá egy constructor() metódust.

Ezután adjon hozzá tetszőleges számú módszert.

Szintaxis

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

Hozzon létre egy osztály metódust "age" néven, amely visszaadja az autó korát:

Példa

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

Próbálja ki Ön is →

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

Paramétereket küldhet a Class metódusoknak:

Példa

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

Próbálja ki Ön is →

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

Böngésző támogatás

Az alábbi táblázat az első böngészőverziót határozza meg, amely teljes mértékben támogatja a következőt: Osztályok JavaScriptben:


Chrome 49	Edge 12	Firefox 45	Safari 9	Opera 36
Mar, 2016	Jul, 2015	Mar, 2016	Oct, 2015	Mar, 2016

Ebben az oktatóanyagban később még sok mindent megtudhat a JavaScript osztályokról.