Perbaiki sebuah fungsi yang telah kehilangan "this"

kembali ke pelajaran

Pemanggilan kepada askPassword() didalam kode dibawah harus memeriksa passwordnya dan lalu memanggil user.loginOk/loginFail tergantung dari jawabannya.

Tapi pemanggilan itu mengembalikan sebuah error. kenapa?

Perbaiki baris yang di tandai agar kodenya dapat berjalan dengan benar (baris lainnya tidak perlu diubah).

function askPassword(ok, fail) {
  let password = prompt("Password?", '');
  if (password == "rockstar") ok();
  else fail();
}

let user = {
  name: 'John',

  loginOk() {
    alert(`${this.name} logged in`);
  },

  loginFail() {
    alert(`${this.name} failed to log in`);
  },

};

askPassword(user.loginOk, user.loginFail);

Errornya muncul karena ask mendapatkan fungsi loginOk/loginFail tanpa objeknya.

ketika ask memanggil, loginOk/loginFail mengasumsikan bahwa this=undefined.

Ayo kita coba bind konteksnya:

function askPassword(ok, fail) {
  let password = prompt("Password?", '');
  if (password == "rockstar") ok();
  else fail();
}

let user = {
  name: 'John',

  loginOk() {
    alert(`${this.name} logged in`);
  },

  loginFail() {
    alert(`${this.name} failed to log in`);
  },

};

askPassword(user.loginOk.bind(user), user.loginFail.bind(user));

Sekarang kodenya berjalan.

Alternatif lainnya bisa menggunakan:

          //...
askPassword(() => user.loginOk(), () => user.loginFail());
        

Contoh diatas biasanya bekerja dan terlihat lebih rapih.

Cara ini sedikit kurang bisa digunakan didalam situasi yang lebih kompleks dimana variabel user mungkin berubah setelah askPassword dipanggil, tapi sebelum pengguna menjawab dan memanggil () => user.loginOk().