Sebelum membahas judul artikel ini, ada beberapa pertanyaan yang mungkin akan membantu kita dalam memahami kedudukan objek di dalam Javascript.

Apakah Javascript mengenal objek seperti bahasa – bahasa lain?

Jawabanya “Ya”, bahkan hampir sebagian besar data di dalam Javascript berupa objek kecuali beberapa data primitive seperti string, number, boolean, null dan undefined. Sebagai catatan, untuk tipe data string kadang masih membuat kita bingung, karena string bisa bersifat seperti objek karena memiliki beberapa method seperti .toUpperCase(), .split(), dll. Namun, ketika string dijadikan parameter dalam sebuah fungsi atau disalin ke dalam variabel, string berperilaku seperti data primitive karena string tidak disimpan dalam bentuk reference melainkan dalam bentuk value. Javascript hanya menggunakan dua cara untuk menyimpan data dalam sebuah variabel yaitu by copies/values dan by reference/pointers. Dan kita tahu, semua objek disimpan dalam bentuk reference sehingga setiap ada perubahan, semua variabel yang berisi objek tersebut juga akan berubah. Contoh:

var myStr = "Indonesia";

function left (str, num) {
	return str.substr(0, num);
}

// seperti objek punya method
console.log( myStr.toUpperCase() ); // INDONESIA

// jika objek, harusnya myStr 
// berubah ketika dimodifikasi
console.log ( left(myStr, 4) );  // Indo

// ternyata nilai myStr tidak berubah
console.log( myStr );  // Indonesia

Tapi, kita tidak akan membahas anomali di atas, karena penulis sendiri juga tidak paham kenapa bisa begitu. Apakah memang dirancang (by design) seperti itu atau memang ada hal – hal lain. Yang jelas, kita tahu bahwa Javascript mengenal objek dan sebagian besar, kita bekerja dengan objek. Jika demikian, maka akan timbul pertanyaan lagi.

Jika Javascript mengenal objek, berarti ada class di Javascript?

Pertanyaan ini tidak bisa dijawab dengan “Ya” atau “Tidak”, tapi mari kita coba telaah penjelasan berikut ini.

Di dalam paradigma Object Oriented Programming (OOP) klasik, sebuah objek akan di-instantiasi (dibuat) dari sebuah class dan ini banyak diterapkan oleh bahasa – bahasa lain di luar Javascript. Jadi, bagi kita yang datang dari bahasa yang menggunakan desain Object Oriented klasik pasti akan bertanya – tanya bagaimana cara membuat class di Javascript. Tapi sayangnya, secara eksplisit Javascript tidak menjelaskan tentang komponen class. Tetapi, dalam teknik Classical Inheritance kita bisa menyebut bahwa sebuah fungsi bisa dianggap sebagai class constructor.

Di dalam Javascript, fungsi adalah instan objek. Fungsi memiliki peran ganda dalam penggunaanya. Pertama, fungsi bisa digunakan sebagai class constructor jika dipanggil dengan menggunakan keyword new. Kedua, fungsi digunakan sebagaimana mestinya seperti dalam bahasa lain.

Object Creation

Objek dalam Javascript dibuat dari prototype. Bentuk dari prototype adalah objek. Dengan kata lain, kita membuat objek dari objek, bukan dari class. Dialek class baru ada di ES6, tetapi tidak menjadikan Javascript benar – benar memiliki class karena tetap harus ditransformasikan ke basis prototype.

function Phone() {}
// Phone > Function.prototype > Object.prototype > null

var phone = new Phone();
// phone > Phone.prototype > Function.prototype > dst...

function Android() {
    Phone.call(this);
}

Android.prototype = Object.create(Phone.prototype);
Android.prototype.constructor = Android;
var nexus = new Android();

// nexus > Android.prototype > Phone.prototype > dst...

Technique

Ada tiga teknik dalam pembuatan sebuah objek di Javascript. Penulis akan tambahkan satu lagi (menjadi empat) sehubungan dengan mulai digunakanya ES6.

Object Initializer / Syntax Construct

Penulis sedikit sulit untuk mendefinisikan namanya, namun intinya bahwa objek dibuat dengan gaya/sintak inisialisasi-nya.

// objek literal dibuat dengan sintak : {} 
var coord = { x: 1, y: 2 }

// objek array dibuat dengan sintak : []
var months = [ 'Jan', 'Feb', 'Mar', 'Apr' ]

// objek fungsi dibuat dengan sintak : function
function add(a, b) {
    return a + b;
}
Function Constructor

Teknik ini yang sudah dibahas di awal dimana fungsi identik sebagai class constructor. Ketika dipanggil dengan keyword new maka akan tercipta sebuah objek. Teknik ini lebih terasa seperti memaksa agar kita familiar dengan paradigma OOP klasik, yang mengakibatkan kita kadang salah persepsi tentang objek di Javascript.

function Phone(name) {
    this.name = name;
}

// tambah method ke dalam prototype
Phone.prototype.callNumber = function(strNumber) {
    console.log( 'Calling ' + strNumber );
}

// instantiasi dengan `new`
var phone = new Phone('My Android Phone');
phone.callNumber('081298419718');
Object.create

Teknik ini menurut penulis yang paling ideal untuk memahami bagaimana sebuah objek dibuat di Javascript. Object.create() membaca parameter pertama sebagai prototype, sehingga jelas bahwa objek dibuat dari objek prototype.

var phone = Object.create(Object.prototype, {
    name: {
        writable: true,
        enumerable: true,
        configurable: true
    },
    callNumber: function(strNumber) {
        console.log( 'Calling ' + strNumber );
    }
});

// dapat diubah nilainya karena `writable`
phone.name = 'My Android Phone'; 

// dapat dibaca dalam enumerasi karena `enumerable`
for(var prop in phone) {
    if (prop == 'name') {

    }
}

// dapat dihapus karena `configurable`
delete phone.name;
Class Syntax

Fitur ini baru ada di spesifikasi ES6 (EcmaScript 2015) dimana kita dapat membuat objek dari sebuah class yang dituliskan dengan sintak class seperti dalam paradigma objek klasik.

class Phone {
    constructor (name) {
        this.name = name;
    }

    callNumber (strNumber) {
        console.log( 'Calling ' + strNumber );
    }
}

class Android extends Phone {
    constructor (name, version) {
        super(name);
        this.version = version;
    }
}

var phone = new Phone('My Phone');
var droid = new Android('My Android Phone', 'Lolipop');

droid.callNumber('081298419718');
Advertisements