Memahami This, Bind, Call, dan Apply di JavaScript.

this adalah salah satu konsep JavaScript yang paling sering membingungkan, karena nilainya ditentukan bagaimana fungsi dipanggil, bukan di mana fungsi itu dideklarasikan.

this dalam Method Objek

const pengguna = {
  nama: "Bagas",
  sapa() {
    console.log(`Halo, saya ${this.nama}`);
  },
};

pengguna.sapa(); // "Halo, saya Bagas" — this merujuk ke 'pengguna'

this yang Hilang Konteksnya

const sapaLepas = pengguna.sapa;
sapaLepas(); // "Halo, saya undefined" — this tidak lagi merujuk ke 'pengguna'

Ini terjadi karena this ditentukan saat fungsi dipanggil, bukan saat didefinisikan. Ketika sapa dilepas dari objeknya dan dipanggil sendiri, konteks this-nya ikut hilang.

call() dan apply(): Menentukan this Secara Manual

function sapa() {
  console.log(`Halo, saya ${this.nama}`);
}

const orang1 = { nama: "Nadia" };

sapa.call(orang1);          // this diatur jadi 'orang1'
sapa.apply(orang1);         // sama seperti call, beda cara kirim argumen

Perbedaan call dan apply ada pada cara mengirim argumen tambahan: call menerima argumen satu per satu, sedangkan apply menerima argumen dalam bentuk array.

function sapaDenganPesan(pesan) {
  console.log(`${pesan}, saya ${this.nama}`);
}

sapaDenganPesan.call(orang1, "Halo");
sapaDenganPesan.apply(orang1, ["Halo"]);

bind(): Mengunci this Secara Permanen

const sapaTerikat = sapaDenganPesan.bind(orang1);
sapaTerikat("Selamat pagi"); // this selalu merujuk ke 'orang1'

bind() tidak langsung memanggil fungsinya, melainkan mengembalikan fungsi baru dengan this yang sudah terkunci — sangat berguna saat fungsi dipakai sebagai callback, misalnya di event listener.

this di Arrow Function

Arrow function tidak memiliki this sendiri — ia mewarisi this dari scope tempat ia dideklarasikan.

const timer = {
  detik: 0,
  mulai() {
    setInterval(() => {
      this.detik++; // this tetap merujuk ke 'timer', bukan ke setInterval
      console.log(this.detik);
    }, 1000);
  },
};

Jika memakai function biasa di dalam setInterval, this justru akan merujuk ke undefined atau objek global, bukan ke timer — inilah alasan arrow function sering jadi pilihan tepat untuk callback semacam ini.

Kesimpulan

Nilai this ditentukan oleh cara pemanggilan fungsi, bukan lokasi deklarasinya. call dan apply mengatur this untuk satu kali pemanggilan, bind mengunci this secara permanen ke fungsi baru, sementara arrow function menghindari masalah ini sepenuhnya dengan mewarisi this dari lingkungan sekitarnya.