Menghemat Memori Dengan Prototype di JavaScript

“If you don’t see yourself as a winner, then you cannot perform as a winner.”
― Zig Ziglar

T

untutan interaksi pengguna dengan komputer semakin dimanjakan dengan JavaScript. Masifnya penggunaan JavaScript demi membuat nyaman pengguna, membuat penjelajah web (web browser) menanggung beban memori yang sangat besar. Coba perhatikan baris kode dibawah ini.

<script type="text/javascript">
var odongodongbiasa = function (warna,roda)
{
 this.warna=warna;
 this.roda=roda;
 this.genjot = function () {return "Odong Biasa "+this.warna+" digenjot.
";}
}

var odongMangEncep=new odongodongbiasa("Biru",5);
var odongMangUjang=new odongodongbiasa("Hijau",6);
var odongMasKaryo=new odongodongbiasa("Ungu",7);

document.write(odongMangEncep.genjot());
document.write(odongMangUjang.genjot());
document.write(odongMasKaryo.genjot());
</script>

odongodongbiasa adalah suatu class yang punya 2 properti dan 1 metode.  Tidak ada yang aneh disini. Dari baris kode diatas kita bisa membuat 3 objek yang berbeda (odongMangEncep,odongMangUjang dan odongMasKaryo) yang masing-masing punya keunikannya sendiri-sendiri. Tiga objek tersebut juga punya satu metode genjot yang sama. Mari kita lihat hasilnya di bawah ini.

Odong Biasa Biru digenjot.
Odong Biasa Hijau digenjot.
Odong Biasa Ungu digenjot.

Dalam memori, akan terdapat 3 objek yang tentunya ada 3 metode genjot didalamnya. Jika ada sejumlah n objek, maka akan terdapat juga sejumlah n metode genjot yang ditampung dalam memori. Jika kebetulan n adalah bilangan yang sangat besar maka kebutuhan memori pun akan berbanding lurus.

Prototype Sebagai Solusi

Coba perhatikan baris kode di bawah ini.

<script type="text/javascript">
var odongodongproto = function (warna,roda)
{
 this.warna=warna;
 this.roda=roda;
}

odongodongproto.prototype.genjot = function()
{
 return "Odong "+this.warna+" digenjot.
";
};

var odongProtoMangEncep=new odongodongproto("Biru",5);
var odongProtoMangUjang=new odongodongproto("Hijau",6);
var odongProtoMasKaryo=new odongodongproto("Ungu",7);

document.write(odongProtoMangEncep.genjot());
document.write(odongProtoMangUjang.genjot());
document.write(odongProtoMasKaryo.genjot());
</script>

Dalam class odongodongproto, alih-alih menempatkan metode genjot di dalam, kita menambahkan metode prototype di luar class. Sintak dari pembuatan metode prototype adalah

{nama_class}.prototype.{nama_genjot} = function(){...};

Dengan menggunakan prototype, maka penggunaan memori dapat diilustrasikan sebagai berikut.

Dari sekian jumlah n objek, hanya ada 1 metode genjotyang ditampung dalam memori. Kami telah membuat pengujian di situs jsperf.com. Situs ini memang ditujukan bagi para pemrogram untuk melakukan benchmark atas beberapa alternatif baris kode yang telah dibuat. Silakan klik di pranala ini http://jsperf.com/metode-biasa-vs-prototipe.

Gambar di atas adalah sebagian potongan gambar hasil pengujian. Tentunya setiap pengujian akan berbeda hasilnya. Selamat mencoba dan semoga mencerahkan.