Menambah ‘Method’ Baru Secara Dinamis Untuk Objek JavaScript


Pada suatu ketika, saya membuat sebuah objek dialog  dengan menggunakan JQuery UI Dialog:

var d = $(elemen).dialog({autoOpen:false, modal: true});

Lalu, saya ingin menambahkan sebuah method untuk objek d tersebut, sehingga saya bisa memanggilnya seperti berikut ini:

d.ambilDataDariServer();

Jika ini adalah pemograman Java, saya dengan segera akan mengubah definisi di file class.  Tapi di JavaScript tidak ada istilah class.  Lalu, bagaimana cara menambah method baru tersebut di JavaScript?

Beruntungnya, objek JavaScript bukanlah ‘objek‘ dalam arti sesungguhnya melainkan  hanya penampung (mirip array?).  Jadi, bila saya ingin menambah method baru, saya dapat menambahkan elemen baru di ‘array‘ objek tersebut, seperti berikut ini:

d['ambilDataDariServer'] = function() {
  // kode program berisi proses
};

Alternatif lain, bila memakai jQuery, bisa menggunakan method .extend() seperti berikut ini:

$.extend(d, {
  ambilDataDariServer: function() {
     // kode program berisi proses
  }
};

Masih ada satu lagi alternatif lainnya, yaitu dengan memakai objek prototype di JavaScript.  Cara ini agak berbeda, karena perubahan yang dibuat berlaku untuk semua objek yang ‘diwakili’ oleh class ini.   Sebagai contoh, karena objek d yang saya buat adalah sebuah objek jQuery, maka saya akan menambahkan method di prototype milik jQuery seperti berikut ini:

jQuery.prototype.ambilDataDariServer = function() {
   // kode program berisi proses
};

Konsekuensi dari pengguna prototype adalah bukan hanya objek d saja yang kini memiliki ambilDataDariServer(), tapi juga seluruh objek jQuery() sehingga: $(this).ambilDataDariServer() dan $('fieldset ul li").ambilDataDariServer() akan mengerjakan method yang baru saja saya tambahkan.

Ternyata ada banyak cara untuk melakukan sesuatu yang sama🙂

Perihal Solid Snake
I'm nothing...

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: