Object Method dan this

Fungsi milik object

Ketika function disimpan sebagai properti object, ia disebut method. Method biasanya bekerja dengan data object itu sendiri:

let kalkulator = {
  angka: 10,
  tambah(n) {
    return this.angka + n;
  }
};
console.log(kalkulator.tambah(5)); // 15

Sintaks tambah(n) {...} adalah method shorthand, cara ringkas menulis method di object literal.

this: kata ganti untuk "object ini"

Di dalam method, this merujuk ke object tempat method dipanggil. Analoginya seperti kata "saya" dalam percakapan: artinya tergantung siapa yang bicara.

let user = {
  nama: "Rizky",
  sapa() {
    console.log("Halo, saya " + this.nama);
  }
};
user.sapa(); // "Halo, saya Rizky"

this.nama artinya "properti nama milik object ini (user)".

Jebakan: this yang lepas

Nilai this ditentukan oleh CARA fungsi dipanggil, bukan di mana ia didefinisikan. Kalau method dilepas dari objectnya, this bisa berubah:

let user = {
  nama: "Rizky",
  sapa() { console.log("Halo, " + this.nama); }
};

let fungsiLepas = user.sapa;
fungsiLepas(); // "Halo, undefined" (atau error di strict mode)

Karena dipanggil tanpa object di depannya, this tidak lagi merujuk ke user. Ini sumber bug klasik, terutama saat method dijadikan callback.

Catatan teknis: Arrow function tidak punya this sendiri. Method yang ditulis sebagai arrow function akan mewarisi this dari scope luar, bukan dari objectnya. Jadi jangan tulis method object dengan arrow function kalau method itu butuh this. Pakai method shorthand atau function biasa.

Solusi umum

Untuk callback yang butuh this, bungkus dengan arrow function atau pakai bind:

setTimeout(() => user.sapa(), 1000); // this tetap user

Arrow function di sini mewarisi this dari scope sekitarnya, sehingga user.sapa() dipanggil dengan benar.

Perbandingan: method vs arrow sebagai method

Ringkasan perilaku this dalam berbagai cara penulisan method:

let obj = {
  nama: "Objek",
  // 1. method shorthand: this = obj (benar)
  cara1() { return this.nama; },
  // 2. function biasa: this = obj (benar)
  cara2: function() { return this.nama; },
  // 3. arrow function: this = scope luar (salah untuk method!)
  cara3: () => this.nama
};

console.log(obj.cara1()); // "Objek"
console.log(obj.cara2()); // "Objek"
console.log(obj.cara3()); // undefined (atau error)

Hafalkan: untuk method yang butuh this, pakai cara 1 atau 2. Arrow function hanya untuk callback dan fungsi yang tidak butuh this sendiri. Tabel kecil ini layak ditempel di catatan belajarmu.

Kesimpulan

this = "object sebelum titik saat dipanggil". Pahami aturan ini dan kamu akan terhindar dari separuh bug misterius di JavaScript.