Fix en funktion der mister "this"

tilbage til lektionen

Kaldet til askPassword() i koden nedenfor skal tjekke passwordet og derefter kalde user.loginOk/loginFail afhængigt af svaret.

Men det fører til en fejl. Hvorfor?

Fix den fremhævede linje for at alt skal virke korrekt (andre linjer skal ikke ændres).

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

let user = {
  name: 'John',

  loginOk() {
    alert(`${this.name} logget ind`);
  },

  loginFail() {
    alert(`${this.name} fejl i log in`);
  },

};

askPassword(user.loginOk, user.loginFail);

Fejlen sker fordi askPassword får funktionerne loginOk/loginFail uden objektet.

Når den kalder dem, antager de this=undefined.

Lad os binde konteksten:

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

let user = {
  name: 'John',

  loginOk() {
    alert(`${this.name} logget ind`);
  },

  loginFail() {
    alert(`${this.name} fejl i log in`);
  },

};

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

Nu virker det.

En alternativ løsning kan være at bruge en wrapper-funktion:

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

Det virker normalt også fint og ser ok ud.

Det er lidt mindre pålideligt i mere komplekse situationer hvor user variablen kan ændre sig efter askPassword er kaldt, men før besøgende har svaret og kalder () => user.loginOk().