Function binding

Ketika mengirimkan metode objek sebagai callback, seperti setTimeout, terdapat sebuah masalah: “kehilangan this”.

Didalam chapter ini kita akan belajar cara memperbaikinya.

Kehilangan “this”

Kita sudah melihat beberapa contoh saat kehilangan this. Sekalinya sebuah metode dikirim kebagian kode lain dengan terpisah dari objeknya – this akan menghilang dari metodenya.

Ini adalah bagaimana hal itu terjadi dengan setTimeout:

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

setTimeout(user.sayHi, 1000); // Hello, undefined!

Seperti yang bisa kita lihat, keluarannya tidak menampilkan “John” sebagai this.firstName, tapi menampilkan undefined!

Itu karena setTimeout mendapatkan fungsi user.sayHi, terpisah dari objeknya. Baris terakhir bisa ditulis ulang sebagai:

let f = user.sayHi;
setTimeout(f, 1000); // kehilangan konteks dari user

Metode setTimeout didalam peramban sedikit spesial: metode tersebut menyetel this=window untuk pemanggilan fungsi (untuk Node.js, this menjadi objek timer, tapi tidak terlalu penting disini). Jadi untuk this.firstName metodenya jadi mendapatkan window.firstName, yang mana tidak ada. Dalam kasus serupa lainnya this akan menjadi undefined.

Tugasnya cukup tipikal – kita ingin mengirim metode objek ke bagian kode lainnya (disini – kepada penjadwal/setTimeout) dimana metodenya akan dipanggil. Bagaimana cara untuk memeriksa konteksnya dipanggil dengan benar?

Solusi 1: pembungkus

Solusi sederhananya adalah untuk menggunakan fungsi pembungkus: