JavaScript: Bahasanya · 9/12
`this`, context, dan kenapa arrow function berbeda
`this` ditentukan oleh cara function dipanggil, bukan tempat ia ditulis. Empat aturan, tidak ada misteri.
Baca 28 menit
Setelah pelajaran ini kamu bisa
- Menentukan `this` menunjuk ke apa di setiap tempat pemanggilan
- Menjelaskan kenapa method kehilangan `this` saat dikirim sebagai callback
- Memakai arrow function untuk mewarisi `this` secara sengaja
- Memperbaiki `cannot read properties of undefined` akibat context yang hilang
this ditentukan oleh cara sebuah function dipanggil, bukan tempat ia ditulis. Satu kalimat itu menyelesaikan hampir semua kebingungan soal ini.
Empat aturannya, sesuai prioritas
| Dipanggil sebagai | this adalah |
|---|---|
new Thing() | Object yang baru dibuat |
fn.call(x), fn.apply(x), fn.bind(x) | Apa pun yang kamu kirim sebagai x |
obj.method() | obj — benda di sebelah kiri titik |
fn() sendirian | undefined di module dan strict mode |
Hasil
Tekan Jalankan untuk melihat hasilnya.
Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.
Jebakan callback
Di sinilah rasa sakitnya nyata. Mengirim obj.method sebagai callback melepaskannya — penerimanya memanggilnya sebagai function biasa, jadi this hilang. Error-nya biasanya muncul jauh dari kesalahan sebenarnya.
Hasil
Tekan Jalankan untuk melihat hasilnya.
Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.
Arrow function tidak punya `this` sendiri
Arrow function tidak mendapat this sendiri. Ia memakai this apa pun yang ada di scope tempat ia ditulis — mirip closure, tapi untuk this. Ini biasanya yang kamu inginkan di dalam sebuah method, dan justru yang tidak kamu inginkan kalau dipakai *sebagai* method.
Hasil
Tekan Jalankan untuk melihat hasilnya.
Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.
Tugas praktik
Ambil object rusak ini dan perbaiki dengan dua cara berbeda — sekali dengan bind dan sekali dengan pembungkus arrow: const t = { name: "x", greet() { return this.name; } }; const fn = t.greet; fn();. Lalu jelaskan dalam satu kalimat kenapa t.greet() jalan tapi fn() tidak.
Hasil yang diharapkan
Kedua perbaikan menghasilkan "x"; pemanggilan biasa tidak punya apa pun di kiri titik.
Cek pemahaman
Pilih jawaban dulu