SESI 43 - Object pada JAVASCRIPT : THIS

//Membahas konsep this

Untuk memahami this harus paham dulu cara memanggil object dari beberapa cara, karena kita akan membahas konteks (context) karena ketika kita membuat dan memanggil object nanti kita akan berada pada sebuah context/sebuah keadaan yang berbeda, tergantung bagaimana cara kita membuat dan memanggil fungsinya. Ketika memanggil fungsi berbeda maka kita berada di sebuah konteks yang berbeda. Contoh:

Review dari sesi sebelumnya mengenai membuat dan memanggil object.

Contoh:

cara 1 - function declaration

function halo(){

     var obj;

     console.log('halo');

}

halo(); // cara menampilkannya, hasil di console log => halo

cara 2 - object literal

var obj ={};

obj.halo = function(){

console.log('halo');

}

obj.halo();

hasil di console log => halo

cara 3 - constructor

function Halo(){

console.log('halo');

}

new Halo();

Ketiga cara ini menampilkan hal yang sama tetapi konteksnya berbeda. Cara membuat dan memanggilnya berbeda, maka konteksnya berbeda. Pemahaman ini akan tepakai ketika memahami konsep tentang this.

Konsep this

This adalah keyword spesial yang secara otomatis didefinisikan pada setiap function. Jadi setiap kita membuat function atau membuat object menggunakan cara apapun, otomatis ada keyword this yang didefinisikan. Contohnya:

console.log(this); => di console browser berisi sesuatu secara default isi dari keyword this adalah object window/object global. Sama saja ketika kita menulis seperti ini:

console.log(window); =>di console browser akan muncul hal yang sama mengenai this misal:

console.log(window==this); => diconsole browser akan muncul boolean dengan nila true.

misal:

var a =10;

console.log(this.a); => 10

console.log(window.a); => 10

Jadi, setiap kita membuat variable di scope global, artinya sama saja properti/method dari object window dan this. Karena object window = obj. this maka bisa diganti obj this dengan obj window.

Context 1 : Jika membuat di scope global this adalah window

Bagaimana menjalankan this pada tiap-tiap cara membuat object? Nanti dilihat konteks dari thisnya berbeda -beda. 

1. Fungsi deklaration 

function halo (){

console.log(this);

console.log('halo');

}

halo();

ternyata di console browser hasilnya isi dari this sama yaitu seperti membuat this di scope global, properti adalah variabel yang ada di dalam obj. method adalah function yang ada di dalam obj scope global itu adalah obj. window.

Artinya ketika kita memanggil halo(); sama saja dengan window.halo(); karena scopenya global artinya bisa di ganti juga dengan this.halo()

Jadi ketika kita membuat function deklaration, this= mengembalikan object global 

2. Obj. Literal

var obj = {};

obj.halo = function(){

console.log(this);

console.log('halo');

}

obj.halo();

hasilnya di console browser yaitu dia mengembalikan obj atau  pada object yang bersangkutan atau objek itu sendiri. misal ditambah properti pada variabel obj.

var obj = {a:10, nama:'Riventus'}; //kemudia di running

maka di console browser => yang dikembalikan adalah objectnya yaitu {........}

Object berserta seluruh isinya. Jadi, menggunakan cara literal, this = mengembalikan object yang bersangkutan.

3. Menggunakan constructor 

function Halo(){

      console.log(this);

      console.log('halo');

}

new Halo();

di console browser akan tampil bahwa this mengembalikan objectnya, bukan objeck di atas tetapi menampilkan obj yang baru dibuat. new artinya instance. Jadi, this pada constructor = mengembalikan objek yang baru dibuat.

misal:

var obj1 = new Halo(); => membuat object untuk obj1

var obj2 = new Halo(); => membuat object untuk obj2

Jadi this pada hal ini mengembalikan object yang baru dibuat. Contoh kasusnya nanti akan berinteraksi dengan DOM(Document,Object,Model)

Jadi diingat-ingat artinya keyword this untuk mengembalikan nilai dengan cara yang berbeda.