Tag: JavaScript

Sedikit kilas balik pada catatan sebelumnya tentang class, bahwa class memiliki property dan method. Setelah sebuah class didefinisikan, maka class tersebut dapat digunakan berulang kali. Caranya adalah dengan menggunakan object constructor (berikutnya akan ditulis constructor). Constructor sebenarnya adalah sebuah function, bedanya adalah constructor dipanggil menggunakan kata kunci new.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
};
 
var heli = new Anjing(5, "putih");
var luki = new Anjing(3, "hitam");

Pada contoh di atas, function “Anjing” adalah sebuah constructor. Constructor dapat dipanggil berulang kali untuk menciptakan object baru dengan kata kunci new. Jadi constructor adalah sebuah cetak biru dari sebuah object, bukan object itu sendiri.

Lalu bagaimana cara untuk mengubah cetak biru tersebut, katankanlah untuk menambah fungsi/fitur pada class “Anjing”? Kita bisa menambahkan method setelah memanggil constructor.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
};
 
var heli = new Anjing(5, "putih");
heli.suara = function() {
  console.log("guk");
};
heli.suara();

var luki = new Anjing(3, "hitam");
luki.suara(); //error

Pada baris ketujuh dapat dilihat method “suara” ditambahkan pada object “heli”. Perhatikan apa yang akan terjadi jika luki juga mencoba untuk bersuara seperti ini luki.suara();. Meskipun luki termasuk ke dalam class “Anjing”, tetapi dia tidak tau bagaimana untuk bersuara karena hanya heli yang ditambahi method “suara”. Jadi ajarkan luki untuk bersuara seperti heli, tapi dengan suara yang agak beda, misalnya “auu”.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
};
 
var heli = new Anjing(5, "putih");
heli.suara = function() {
  console.log("guk");
};
heli.suara();

var luki = new Anjing(3, "hitam");
luki.suara = function() {
  console.log("auu");
};
luki.suara();

Object juga bisa digunakan sebagai argumen pada suatu function, karena pada dasarnya suatu object adalah variabel yang lebih kompleks.

var Anjing = function(suara) {
  this.suara = suara;
};

function keluarkanSuara(anjing) {
  console.log(anjing.suara);
};

var heli = new Anjing("guk");
keluarkanSuara(heli);

Cara yang lebih elegan untuk menambah fungsi/fitur pada sebuah cetak biru objek adalah dengan menggunakan kata kunci prototype. Prototype mewakili sifat pewarisan (inheritance) pada JavaScript. Alih-alih menggunakan heli.suara untuk menambahkan method pada object “heli”, gunakan Anjing.prototype.suara.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
};
 
var heli = new Anjing(5, "putih");
Anjing.prototype.suara = function() {
  console.log("guk");
};
heli.suara();

var luki = new Anjing(3, "hitam");
luki.suara();

Sekarang “luki” bisa menggunakan method “suara” seperti pada “heli” tanpa harus diajarkan terlebih dahulu, karena sudah ditambahkan pada class “Anjing”.

Kegunaan penting dari prototype adalah agar programer tidak perlu menulis ulang kode yang sudah ada di class lain. Misal pada contoh berikut kita ingin membuat class “Kucing”, yang memiliki property atau method yang sama dengan class “Anjing”.

var Kucing = function(umur_kucing_saya, warna_kucing_saya) {
  this.umur = umur_kucing_saya;
  this.warna = warna_kucing_saya;
  this.suara = function() {
    console.log("mew");
  };
};

Pada contoh di atas tampak bahwa class “Kucing” menggunakan property “umur” dan “warna” yang juga ada pada class “Anjing”. Untuk menghindari hal ini maka ciptakan suatu induk, dan gunakan prototype untuk menurunkan property dan method untuk anak-anaknya.

var Hewan = function(suara_hewan) {
  this.suara = function() {
    console.log(suara_hewan);
  };
};

var Anjing = function(umur_anjing, warna_anjing) {
  this.umur = umur_anjing;
  this.warna = warna_anjing;
};

Anjing.prototype = new Hewan("guk");

var heli = new Anjing(5, "putih");
heli.suara();

Pada contoh di atas, meskipun “heli” sebagai “Anjing” tidak memiliki method “suara”, tetapi tetap bisa memanggil method “suara” karena mendapat pewarisan dari class “Hewan”.

Pewarisan juga bisa dilakukan secara bertingkat (prototype chain). Misalnya kita mempunyai seekor anjing bernama heli. Heli ini termasuk anjing, tetapi juga termasuk hewan. Jadi, class “Heli” bisa diturunkan dari class “Anjing”, dan class “Anjing” diturunkan dari class “Hewan”. Mari lanjutkan dan sempurnakan kode di atas sehingga memiliki sifat enkapsulasi dan pewarisan.

var Hewan = function(suara_hewan) {
  var suara = suara_hewan;
  this.bersuara = function() {
    return console.log(suara);
  };
};

var Anjing = function(umur_hewan, warna_hewan) {
  var umur = umur_hewan;
  var warna = warna_hewan;
  this.berumur = function() {
    return console.log(umur);
  };
  this.berwarna = function() {
    return console.log(warna);
  };
};

var Heli = function(hobi_heli) {
  var hobi = hobi_heli;
  this.berhobi = function() {
    return console.log(hobi);
  };
};

Anjing.prototype = new Hewan("guk");
Heli.prototype = new Anjing(5, "putih");

var anjing_saya = new Heli("jogging");
anjing_saya.berhobi(); //jogging
anjing_saya.berumur(); //5
anjing_saya.bersuara(); //guk