Anda telah mengenal berbagai objek yang disediakan oleh Javascript, seperti Date dan Array. Kini Anda akan mempelajari cara membuat suatu objek, lengkap dengan properti dan metodenya. Untuk membuat objek pada prinsipnya Anda melakukan hal-hal seperti berikut: Mendefinisikan fungsi yang akan...

Mendefinisikan Objek

Anda telah mengenal berbagai objek yang disediakan oleh Javascript, seperti Date dan Array. Kini Anda akan mempelajari cara membuat suatu objek, lengkap dengan properti dan metodenya.

Untuk membuat objek pada prinsipnya Anda melakukan hal-hal seperti berikut:

  1. Mendefinisikan fungsi yang akan menjadi metode bagi objek, dan 
  2. Membuat konstruktor objek.

Contoh berikut menunjukkan cara membuat metode-metode yang digunakan pada objek yang diberi nama Becak.

function perolehWarna () {
    return(this.warna);
}

function ubahWarna (warna) {
    this.warna = warna;
}

function tampilkanInfoBecak () {
  document.write("Tipe  : " + this.tipe   + "<br />");
  document.write("Merk  : " + this.merk   + "<br />");
  document.write("CC    : " + this.cc     + "<br />");
  document.write("Warna : " + this.warna  + "<br />");
}

Pada contoh di atas terdapat tiga buah fungsi, yaitu perolehWarna()ubahWarna(), dan tampilkanInfoBecak(). Fungsi perolehWarna() menghasilkan nilai balik berupa properti warna (dinyatakan dengan this.warna). Fungsi ubahWarna() digunakan untuk mengubah properti warna (dinyatakan dengan this.warna = warna). Adapun fungsi tampilkanInfoBecak() digunakan untuk menampilkan isi semua properti.

Konstruktor adalah fungsi yang berisi definisi properti dan menghubungkan  metode-metode objek dengan definisi fungsi seperti yang telah dibuat di atas. Bentuk umum konstruktor objek adalah seperti berikut:

function namaObjek (arg1, ..., arg2) {
  //  Properti Objek
  this.nama_properti = arg2;
  ...
  //  Metode Objek
   this.namaMetode = namaFungsi;
}

Contoh:

function Becak (tipe, merk, cc, warna) {
  //  Properti
  this.tipe   =   tipe;
  this.merk   =   merk;
  this.cc     =   cc;
  this.warna  =   warna;
  
  //  Metode
  this.perolehWarna = perolehWarna;
  this.ubahWarna  = ubahWarna;
  this.tampilkanInfoBecak = tampilkanInfoBecak;
}

Konstruktor di atas digunakan untuk mengisi masing-masing properti dengan argumen konstruktor dan kemudian menghubungkan nama-nama metode objek dengan fungsi-fungsi yang telah didefinisikan di atas.

Dalam hal ini namaVariabel dinamakan sebagai instan dari objek. Contoh:

var becakku = new becak("Sport",  "Ferrari", 3400, "Merah");

Pada contoh di atas, becakku dideklarasikan sebagai instan dari objek Becak. Dalam hal ini properti tipe diisi dengan "Sport", properti merk diisi dengan "Ferrari", properti cc diisi dengan 3400, dan properti warna diisi dengan "Merah".

Contoh lengkap penciptaan objek diperlihatkan pada program berikut:

<script language = "Javascript">
      <!--
      function perolehWarna () {
          return(this.warna);
      }

      function ubahWarna (warna) {
          this.warna = warna;
      }

        function tampilkanInfoBecak () {
            document.write("Tipe  : " + this.tipe   + "<br />");
            document.write("Merk  : " + this.merk   + "<br />");
            document.write("CC    : " + this.cc     + "<br />");
            document.write("Warna : " + this.warna  + "<br />");
      }
    
      function Becak (tipe, merk, cc, warna) {
            //  Properti
              this.tipe   =   tipe;
              this.merk   =   merk;
              this.cc     =   cc;
              this.warna  =   warna;

            //  Metode
              this.perolehWarna = perolehWarna;
              this.ubahWarna  = ubahWarna;
              this.tampilkanInfoBecak = tampilkanInfoBecak;
      }
      
      //  Membuat objek berdasarkan Becak
      var becakku = new becak("Sport",  "Ferari", 3400, "Merah");
      becakku.tampilkanInfoBecak();
      document.write("<hr>");
      becakku.ubahWarna("Merah Candy");
      becakku.tampilkanInfoBecak();
      // Bangden -->
     </script>

Pada program di atas, setelah becakku dideklarasikan, isi semua propertinya ditampilkan melalui pemanggil metode tampilkanInfoBecak()sebagai berikut:

becakku.tampilkanInfoBecak();

Selanjutnya, pernyataan:

becakku.ubahWarna("Merah Candy");

membuat properti warna milik becakku diubah menjadi "Merah Vaganza".

Untuk melihat isi semua properti pada becakku dilakukan pemanggilan seperti berikut:

becakku.tampilkanInfoBecak();

Semoga tutorial ini membantu. Sumber dan hak cipta.


About Author

Bang Den

Script Kiddies


Comment & Discussions

    Please LOGIN before if you want to give the comment.