Förlust av kontext i JavaScript

Låt oss säga att vi har en funktion inuti en funktion. Låt oss kalla den yttre funktionen parent och den inre funktionen child:

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

Från tidigare lektioner vet du att om du sätter en variabel i den yttre funktionen kommer den att vara tillgänglig i den inre funktionen:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // skriver ut 'abcde'
  }
  child(); // anropar den inre funktionen
}

parent(); // anropar den yttre funktionen

Det finns dock en nyans: den inre funktionen har åtkomst till alla variabler i den yttre, men har inte åtkomst till this. Det vill säga: om den yttre funktionen är bunden till ett DOM-element, kommer this i den att peka på det elementet, men this i den inre funktionen kommer inte att göra det!

Vad kommer då this i den inre funktionen att peka på? Svaret: det kommer att vara undefined (i strikt läge), eftersom funktionen inte är bunden till någonting.

Låt oss testa detta i praktiken. Låt oss säga att vi har en input:

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

Låt oss binda funktionen parent till denna input, som ska anropas när input förlorar fokus:

javascript"use strict";

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

// Anropas vid förlust av fokus:
function parent() {
  // någon kod här
  
  function child() {
    // någon kod här
  }
  child(); // anropar barnfunktionen
}

Låt oss skriva ut innehållet i this till konsolen på två ställen: inuti funktionen parent och inuti funktionen child:

javascript"use strict";

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

function parent() {
  console.log(this); // skriver ut en referens till vår input
  
  function child() {
    console.log(this); // skriver ut undefined
  }
  child();
}

Kör denna kod, låt input förlora fokus och titta i konsolen - du kommer att se att den första console.log skriver ut en referens till vår input, och den andra - bara undefined. En sådan situation, där this på ett oväntat sätt inte pekar på det vi behöver, kallas förlust av kontext.

javascript"use strict";

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

function parent() {
  console.log(this.value); // vad skrivs ut?
  
  function child() {
    console.log(this.value); // vad skrivs ut?
  }
  child();
}