Call, Apply, Bind - JavaScript

Sebenarnya artikel ini masih ada hubungannya dengan artikel Function pada postingan sebelumnya tapi saya putuskan untuk ditulis pada postingan tersendiri, mengingat jika dijadikan satu akan menjadi panjang. Artikel memang saya batasi pembahasannya tidak terlalu panjang, selesai dibaca 5 - 10 menit karena itulah waktu efektif membaca, membaca lebih dari 15 menit membutuhkan konsentrasi lebih.

Call
call adalah fungsi yang bisa mengganti nilai dari keyword this didalam sebuah fungsi dengan nilai apapun.

const kaligunung = {
  nama: 'SDN Kaligunung III',
  kode: 'SDKG3',
  catatan: [],
  kelas(tingkat, guru) {
    console.log(
      `${guru} adalah wali murid di sekolah ${this.nama} kelas ${tingkat}`
    );
    this.catatan.push({kelas: `${this.kode}${tingkat}`, guru});
  },
};
kaligunung.kelas('2Q', 'Harry Potter');
kaligunung.kelas('2A', 'Hermione Granger');
console.log(kaligunung);

const kalisari = {
  nama: 'SDN Kalisari IV',
  kode: 'SDNKL4',
  catatan: [],
};

Jika kita menggunakan cara biasa untuk meng-copy object.

const copySekolah = kaligunung.kelas;
console.log(copySekolah);
copySekolah('3D', 'Severus Snape');

copySekolah akan menjadi regular function sehingga keyword this bernilai undefined. Dengan menerapkan call hasilnya sebagai berikut.

copySekolah.call(kalisari, '2D', 'Severus Snape');
console.log(kalisari);

Apply
apply sama dengan call hanya saja kita bisa memasukkan array pada argument-nya.

const data = ['4A', 'Albus Dumbledore'];
copySekolah.apply(kalisari, data);
console.log(kalisari);
copySekolah.call(kaligunung, ...data);

Jika kita gunakan call dengan spread hasilnya juga sama.

Bind
bind menghasilkan fungsi lain yang bisa diekseskusi di lain waktu.

// sebelumnya buatlah element button di html dengan nama class 'btn'
kaligunung.kasKelas = 100000;
kaligunung.tambahKas = function () {
  console.log(this);
  this.kasKelas += 1000;
  console.log(this.kasKelas);
};
document.querySelector('.btn').addEventListener('click', kaligunung.tambahKas);

Jika kita klik element button di html hasilnya sebagai berikut.

keyword this akan mengacu kepada element yang dieksekusi, bukan pada object kaligunung. Jika kita ubah kodenya seperti ini.

document
  .querySelector('.btn')
  .addEventListener('click', kaligunung.tambahKas.bind(kaligunung)); // 'this' keyword mengacu kepada object kaligunung