this adalah kata kunci di dalam fungsi yang menunjuk sebuah object. Object mana yang ditunjuk gak ditentukan waktu fungsinya ditulis, tapi waktu fungsinya dipanggil. Mirip kata "aku": artinya tergantung siapa yang sedang ngomong.
🧪 Tebakan cepat: method
greetdiambil keluar dari object-nya denganconst greet = user.greet, lalu dipanggilgreet(). Masih bisa menyapa Budi? Tebak dulu, jawabannya ada di bagian "Method yang dilepas dari object-nya".
this di dalam method
const user = {
name: "Budi",
greet() {
return "Halo " + this.name;
},
};
console.log(user.greet()); // Halo Budi
useradalah object dengan propertinamedan methodgreet. Method adalah fungsi yang tinggal di dalam object.- Di dalam
greet,thismenunjuk object di kiri titik waktu method-nya dipanggil.user.greet()berartithisadalahuser, jadithis.nameadalah"Budi". - Lewat
this, method bisa membaca dan mengubah properti object-nya sendiri, misalnyathis.name = "Ani".
Patokannya: lihat cara fungsinya dipanggil, bukan tempat fungsinya ditulis. Object di kiri titik, itulah this.
Method yang dilepas dari object-nya
const greet = user.greet;
console.log(greet());
// strict mode: TypeError, karena this-nya undefined
// tanpa strict mode: "Halo ", karena this-nya window
greet() dipanggil tanpa object di kiri titik. Di strict mode (aturan JavaScript yang lebih ketat, otomatis aktif di module dan class), this jadi undefined dan this.name bikin error. Tanpa strict mode, this jadi object global window, dan namanya diam-diam kosong. Jadi jawaban tebakannya: gak bisa. Ini sering kejadian waktu method dikirim sebagai callback, misalnya setTimeout(user.greet, 1000).
Pilih this sendiri: call, apply, bind
const admin = { name: "Ani" };
console.log(user.greet.call(admin)); // Halo Ani
const greetBudi = user.greet.bind(user);
console.log(greetBudi()); // Halo Budi
call(obj, arg1, arg2)memanggil fungsinya saat itu juga, denganthis=obj.apply(obj, [arg1, arg2])sama dengancall, cuma argumennya dikirim dalam satu array.bind(obj)gak langsung memanggil. Dia bikin fungsi baru yangthis-nya terkunci keobj, jadi aman dikirim ke mana saja.
Arrow function gak punya this sendiri
const kucing = {
nama: "Oyen",
suara: () => this.nama,
};
console.log(kucing.suara()); // undefined
Arrow function memakai this dari scope luar, yaitu tempat dia ditulis, bukan object di kiri titik. Scope luarnya di sini bukan kucing, jadi hasilnya undefined. Makanya method ditulis dengan fungsi biasa: suara() { ... }.
Sifat ini justru berguna buat callback di dalam method. Arrow di dalam mulai di bawah memakai this milik mulai, yaitu timer:
const timer = {
detik: 3,
mulai() {
setTimeout(() => console.log(this.detik), 1000); // 3
},
};
timer.mulai();
Kembalikan this supaya bisa dirantai
const langkah = {
jumlah: 0,
maju() {
this.jumlah += 1;
return this;
},
lihat() {
return this.jumlah;
},
};
console.log(langkah.maju().maju().lihat()); // 2
maju()mengubahthis.jumlah, lalureturn this: mengembalikan objectlangkahitu sendiri.- Karena hasil
langkah.maju()adalahlangkahlagi, method berikutnya bisa langsung ditempel di belakangnya. Ini namanya merantai (chaining). - Tanpa
return this,langkah.maju()menghasilkanundefined, dan.maju()yang kedua bikin error.
⚠️ Jebakan yang sering ketemu
- Arrow function sebagai method.
suara: () => this.namagak dapat object-nya. Tulissuara() { ... }. - Lupa
this.jumlah += 1di dalam method mencari variabel bernamajumlah, bukan properti object. Tulisthis.jumlah += 1. - Method dikirim sebagai callback.
setTimeout(user.greet, 1000)melepas method dari object-nya. PakaisetTimeout(() => user.greet(), 1000)atauuser.greet.bind(user).
TL;DR: Nilai this ditentukan cara fungsinya dipanggil: obj.method() berarti this adalah obj. Method yang dilepas lalu dipanggil sendirian kehilangan this-nya. call dan apply memanggil dengan this pilihanmu, bind bikin fungsi baru yang this-nya terkunci. Arrow function gak punya this sendiri dan memakai this dari scope luar, jadi jangan dipakai buat method. Method yang return this bisa dirantai: obj.a().b().
