Belajar Prototype Javascript

Senin, 7 Okt 2019

Apa itu Prototype?

Prototype seringkali membuat bingung programmer, mungkin tidak untuk programmer yang memiliki dasar Class dan Object. Karena sebenarnya di Javascript konsep class agak unik. 

Javascript adalah bahasa yang dinamis, sehingga anda bebas dapat menambahkan properti pada object saat diperlukan; Prototype dapat memperluas object yang sudah didefinisikan. 

Contoh 
fungsi murid(nama,usia){
this.nama = nama;
this.usia = usia;
}
var siswa1 = new murid('sinta',7);
//misalkan ditambah dengan jeniskelamin
siswa1.jk = 'p';
console.log(siswa1.nama);//sinta
console.log(siswa1.usia);//7
console.log(siswa1.jk);//p


var siswa2 = new murid('wati',8);
console.log(siswa2.nama)//wati
console.log(siswa2.usia)//8
console.log(siswa2.jk);//undefined

Pada contoh diatas kita menambahkan jeniskelamin (jk) dimana yang bisa tampil hanya pada object siswa1. Hal tersebut normal sebab kita hanya mendefinisikan jeniskelamin pada object siswa1. Lalu bagaimana bila kita ingin menambah properti object untuk semuanya dalam sekali koding TANPA mengubah fungsi aslinya?

Jawabannya adalah dengan Prototype

Sehingga setelah mendefinisikan function kita tambahkan property yang dibutuhkan;
fungsi murid(nama,usia){
this.nama = nama;
this.usia = usia;
}
murid.prototype.jk = 'p';
var siswa1 = new murid('sinta',7);
console.log(siswa1.jk);//p
var siswa2 = new murid('wati',6);
console.log(siswa2.jk);//p
Belajar Prototype Javascript

Contoh lain:
function buku(id,judul,hal){
this.id=id;
this.judul=judul;
this.hal=hal;
}

buku.prototype.jenis = 'komik';
var satu = new buku(1,'batman',50);
satu.judul; //'batman'
satu.jenis;//'komik'

var dua = new buku(2,'robin',30);
console.log(dua);//buku { id: 2, judul: 'robin', hal: 30 }
console.log(dua.jenis); //'komik'

Untuk mengubah prototype caranya adalah sebagai berikut:
/*prototype juga bisa diubah isinya*/
buku.prototype = {jenis:'majalah'}
console.log(dua.jenis);//'komik' object yang sudah jadi isinya tetap
var tiga = new buku(3,'iron man',70);
tiga.jenis;//'majalah'

Prototype juga bisa berupa function
buku.prototype.hitung = function(){ return this.id+this.hal;}
var empat = new buku(4,'hulk',17); //{ id: 4, judul: 'hulk', hal: 17 }
/* memanggil isi fungsi prototype */
empat.hitung(); //21
buku.prototype.ijir = function(a){ return this.hal+a;}
var lima = new buku(5,'thor',15);
lima.hitung(); //20
lima.ijir(7); //22
logoblog

Tidak ada komentar:

Posting Komentar