Tabt kontekst i JavaScript

Lad os sige, at vi har en funktion i en funktion. Lad os kalde den ydre funktion for parent, og den indre - child:

javascriptfunction parent() {
  function child() {
    
  }
}

Fra tidligere lektioner ved du, at hvis du angiver en variabel i den ydre funktion - vil den være tilgængelig i den indre:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // vil udskrive 'abcde'
  }
  child(); // kalder den indre funktion
}

parent(); // kalder den ydre funktion

Der er dog en nuance: den indre funktion har adgang til alle variabler i den ydre, men har ikke adgang til this. Det vil sige: hvis den ydre funktion er bundet til et DOM-element, vil this i den pege på dette element, men this i den indre funktion - vil ikke!

Hvad vil this så pege på i den indre funktion? Svar: den vil være lig med undefined (i strikt tilstand), da funktionen ikke er bundet til noget.

Lad os teste dette i praksis. Lad os sige, at vi har et inputfelt:

html<input id="elem" value="text">

Lad os binde funktionen parent til dette inputfelt, som vil blive kaldt, når inputfeltet mister fokus:

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

// Kaldes ved tab af fokus:
function parent() {
  // der vil være noget kode her
  
  function child() {
    // der vil være noget kode her
  }
  child(); // kalder den underordnede funktion
}

Lad os udskrive indholdet af this i konsollen på to steder: inde i funktionen parent og inde i funktionen child:

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
  console.log(this); // vil udskrive en reference til vores inputfelt
  
  function child() {
    console.log(this); // vil udskrive undefined
  }
  child();
}

Kør denne kode, lad inputfeltet miste fokus og kig i konsollen - du vil se, at den første console.log vil udskrive en reference til vores inputfelt, og den anden - blot undefined. En sådan situation, hvor this på en uventet måde ikke peger på det, vi har brug for, kaldes tabt kontekst.

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
  console.log(this.value); // hvad udskrives der?
  
  function child() {
    console.log(this.value); // hvad udskrives der?
  }
  child();
}