Třídy JavaScriptu

Obsah

    Zobrazit obsah

ECMAScript 2015, také známý jako ES6, představil třídy JavaScript.

Třídy JavaScriptu jsou šablony pro objekty JavaScriptu.

Syntaxe třídy JavaScript

K vytvoření třídy použijte klíčové slovo class.

Vždy přidejte metodu s názvem constructor():

Syntax

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

Příklad

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

Výše uvedený příklad vytvoří třídu s názvem "Auto".

Třída má dvě počáteční vlastnosti: "name" a "year".

Třída JavaScriptu není objekt.

Je to šablona pro objekty JavaScriptu.

Použití třídy

Když máte třídu, můžete ji použít k vytváření objektů:

Příklad

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

Zkuste to sami →

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

Výše uvedený příklad používá třídu Car k vytvoření dvou předmětů Car.

Metoda konstruktoru je volána automaticky při vytvoření nového objektu.

Metoda konstruktoru

Metoda konstruktoru je speciální metoda:

  • Musí mít přesný název "konstruktor"

  • Provádí se automaticky při vytvoření nového objektu

  • Používá se k inicializaci vlastností objektu

Pokud nedefinujete metodu konstruktoru, JavaScript přidá prázdnou metodu konstruktoru.

Třídní metody

Metody tříd jsou vytvořeny se stejnou syntaxí jako objektové metody.

K vytvoření třídy použijte klíčové slovo class.

Vždy přidejte metodu constructor().

Poté přidejte libovolný počet metod.

Syntax

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

Vytvořte metodu třídy s názvem „věk“, která vrátí věk vozu:

Příklad

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

Zkuste to sami →

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

Parametry můžete odeslat metodám třídy:

Příklad

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

Zkuste to sami →

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

Podpora prohlížeče

Následující tabulka definuje první verzi prohlížeče s plnou podporou Třídy v JavaScriptu:

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

Syntaxe ve třídách musí být napsána v "přísném režimu".

Získáte chyba, pokud nedodržujete pravidla "přísného režimu".

Příklad

V "přísném režimu" se zobrazí chyba, pokud použijete proměnnou bez deklaruje to:

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;
   }
}

Zkuste to sami →

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

Další informace o "přísném režimu" v: Přísný režim JS.