Prototype dalam Javascript ~ Pemrograman dan Teknologi

Sebelumnya, kita sudah mempelajari tentang penggunaan constructor dan new. Kali ini kita akan mempelajari tentang prototype. Prototype bisa digunakan untuk memberikan "properti tambahan" pada objek "turunan" dari constructor yang dibuat dengan new.

Setiap object dan constructor punya properti yang dimiliki sejak constructor dideklarasikan. Tapi, ada saatnya kita ingin menambahkan properti pada tiap objek yang dibuat dari constructor tersebut. Menambahkan properti pada turunan constructor bisa dilakukan secara langsung pada objeknya atau melalui constructornya, Jika ingin menambahkan properti atau function melalui constructor, kita membutuhkan prototype.

Sebelum mempelajari tentang prototype, kita akan mempelajari cara penambahan properti dari objek yang dimiliki oleh konstruktor. Caranya cukup mudah, yaitu cukup dengan memberi nilai pada properti yang belum ada.

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT>
    var objek=function(a, b){
        this.a=a;
        this.b=b;
        this.c=a+b;
        this.fungsi=function(){
             document.write(this.a, " + ", this.b, " = ", this.c);
        }
    };
    
    var o=new objek(1, 2);
    objek.coba=5;
   
    document.write("objek.coba = ", objek.coba, "<BR />");
    document.write("o.coba = ", o.coba, "<BR />");
</SCRIPT>
</BODY>
</HTML>

Pada contoh di atas, properti coba ditambahkan pada constructor bernama objek. Objek o yang dibuat dengan new, tidak mendapatkan tambahan properti, sehingga o.coba menjadi undefined. Bandingkan dengan ini!

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT>
    var objek=function(a, b){
        this.a=a;
        this.b=b;
        this.c=a+b;
        this.fungsi=function(){
             document.write(this.a, " + ", this.b, " = ", this.c);
        }
    };
    
    var o=new objek(1, 2);

    objek.property.coba=5;
    
    document.write("objek.coba = ", objek.coba, "<BR />");
    document.write("o.coba = ", o.coba, "<BR />");
</SCRIPT>
</BODY>
</HTML>

Pada contoh di atas, properti coba ditambahkan pada turunan constructor objek bernama o lewat o sehingga o.coba punya nilai sedangkan objek.coba menjadi undefined karena memang tidak ditambahkan. Dengan prototype, kita bisa menambahkan properti pada beberapa "objek turunan" sekaligus lewat constructornya.

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT>
    var objek=function(a, b){
        this.a=a;
        this.b=b;
        this.c=a+b;
        this.fungsi=function(){
             document.write(this.a, " + ", this.b, " = ", this.c);
        }
    };
    
    var o=new objek(1, 2);
    var p=new objek(3, 4);
    
    objek.prototype.coba=8;
    
    document.write("o.coba = ", o.coba, "<BR />");
    document.write("p.coba = ", p.coba, "<BR />");
</SCRIPT>
</BODY>
</HTML>

Jika hanya ingin menambahkan properti pada satu objek, prototype tidak diperlukan. Kita bisa menambahkan properti langsung pada object yang akan diberi properti.

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT>
    var objek=function(a, b){
        this.a=a;
        this.b=b;
        this.c=a+b;
        this.fungsi=function(){
             document.write(this.a, " + ", this.b, " = ", this.c);
        }
    };
    
    var o=new objek(1, 2);
    var p=new objek(3, 4);
    
    o.coba=8;
    p.coba=9;

    document.write("o.coba = ", o.coba, "<BR />");
    document.write("p.coba = ", p.coba, "<BR />");
</SCRIPT>
</BODY>
</HTML>

Selanjutnya, selamat mencoba!