Kamis, 22 Desember 2011

Sekilas Javascript OOP

Didalam Katagori: Uncategorized, Javascript Javascript Object Oriented Programming OOPBiasanya teknik yang digunakan dalam mengimplementasikan OOP di javascript adalah menggunakan cara yang umum. yaitu membuat Class di javascript kemudian kita buat instance dengan keyword "new". Tidak salah memang, namun cara ini bagi sebagian orang terlalu classic. cara lainnya adalah dengan object literal.
Bagi saya keduanya sama-sama powerfull, namun kali ini saya ingin
mencoba memberikan betapa indahnya Javascript Object Literal… :D




Namun saya coba tetap menyertakan teknik OOP yang biasa digunakan. perhatikan contoh dibawah ini:
    function Person(name,age){
        this.name = name;
        this.age  = age
    }
    Person.prototype.getAge = function(){
        console.log("Umur Saya : " + this.age);
    }
    Person.prototype.getName = function(){
        console.log("Nama Saya : " + this.name);
    }
    var man = new Person("Didin","27");
    man.getAge();
    man.getName();

cara diatas adalah cara yang umum dalam membuat class di JavaScript,
Membuat class dengan nama Person yang memiliki attribute name, age lalu getAge dan getName sebagai method. kedua attribute diatas bersifat public, artinya mereka bisa diakses dari instance baru hasil dari keyword New sama halnya dengan kedua method yang ada (getName dan getAge). mereka dapat diakses dari dalam dan luar scope function.
keyword prototype pada "Person.prototype.getName …" merupakan sintax yang berfungsi mendaftarkan method / fungsi baru kedalam sebuah Object. Inilah keistimewaan javascript dibanding dengan bahasa program lainnya. dalam hal OOP javascript berkemampuan untuk memanipulasi object secara dinamis.
misal saya ingin menambahkan satu buah method lagi setName()
Person.prototype.setName = function(name){
    this.name = name;
}

coba gunakan function setName diatas didalam script tadi, sehingga hasilnya :
    var man = new Person("Didin","27");
    man.getAge();
    man.getName();
    man.setName("Nurdin");
    man.getName();

Versi Literal Sekarang kita coba gunakan teknik literal.

var Person = {
    name : null,
    age : null,
    getName : function(){
        console.log("Nama Saya : " + this.name);
    },
    getAge : function(){
        console.log("Umur Saya : " + this.age);
    },
    setName : function(name){
        this.name = name;
    }
};
var man = Person;
    man.setName("Didin");
    man.getName();
    man.setName("Nurdin");
    man.getName();
var woman = Person;
    woman.setName("Monalisa");
    woman.getName();
    woman.setName("Talita");
    woman.getName();
    man.setName("Nurdin Hamid :D ");
    man.getName();

Silahkan bandingkan OOP versi umum dengan versi literal. bentuk penulisan versi literal hampir mirip dengan struktur json bukan? memang sekilas tampak mirip.
pada versi literal jika kita ingin menambahkan objek kita tidak perlu menggunakan keyword prototype. cukup dengan menulis langsung pada Object yang ingin kita extend dengan separator titik. misal saya ingin menambahkan method setAge() untuk mengeset nilai age.
Person.setAge = function(age){
  this.age = age;
}

Sangat simple dan walaupun menggunakan literal fungsi dinamis yang merupakan khas javascript tetap ada.

Tidak ada komentar: