Home » Javascript » Kelas pada JavaScript: Sintak dan Cara Membuat Codenya

Kelas pada JavaScript: Sintak dan Cara Membuat Codenya

by Catur Kurnia Sari
by Catur Kurnia Sari

ECMAScript 2015, juga dikenal sebagai ES6, memperkenalkan Kelas JavaScript.

Kelas JavaScript adalah template untuk Objek JavaScript.

Sintaks Class

Gunakan kata kunci class untuk membuat kelas.

Selalu tambahkan metode konstruktor ().

Tambahkan sejumlah metode tambahan.

Sintak:

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

Contoh
Definisi kelas untuk kelas bernama “Car”:

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

Sekarang kita dapat menggunakan kelas Car untuk membuat objek Car:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Class</h2>

<p> Cara menggunakan Kelas JavaScript. </p>
<p id="demo"></p>

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

myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
myCar.name + " " + myCar.year;
</script>

</body>
</html>

Metode constructor dipanggil secara otomatis saat objek baru dibuat.

Metode constructor adalah metode khusus:

  • Metode harus memiliki nama yang tepat “constructor “
  • Metode dijalankan secara otomatis ketika objek baru dibuat
  • Metode digunakan untuk menginisialisasi properti objek

Jika Anda tidak mendefinisikan metode constructor , JavaScript akan menambahkan metode constructor kosong.

Metode Class

Metode class dibuat dengan sintaks yang sama seperti metode objek.

Buat metode Kelas bernama “age”, yang mengembalikan usia Mobil.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Class Method</h2>

<p> Cara mendefinisikan dan menggunakan metode Kelas. </p>
<p id="demo"></p>

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

</body>
</html>

Kita dapat mengirim parameter ke metode Kelas.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Class Method</h2>

<p> Meneruskan parameter ke dalam metode "age()". </p>
<p id="demo"></p>

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

</body>
</html>

Browser Support

Tabel berikut menjelaskan versi browser pertama dengan dukungan penuh untuk Kelas di JavaScript:

ChromeEdgeFirefoxSafariOpera
Chrome 49Edge 12Firefox 45Safari 9Opera 36
Maret, 2016Juli, 2015Maret, 2016Oktober, 2015Maret, 2016

“use strict”

Sintaks kelas harus ditulis dalam “mode strict”.

Kita akan mendapatkan pesan kesalahan jika tidak mengikuti aturan “mode strict”.

Contoh
Dalam “mode strict” kita akan mendapatkan error jika menggunakan variabel tanpa mendeklarasikannya:

<!DOCTYPE html>
<html>
<body>

<h2> Kelas JavaScript ditulis dalam "mode strict" </h2>
<p> Dalam Kelas JavaScript Anda tidak dapat menggunakan variabel tanpa mendeklarasikannya. </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
   let date = new Date(); // This will work
   return date.getFullYear() - this.year;
  }
}

myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>

</body>
</html>

You may also like