Verlies van context in JavaScript

Stel we hebben een functie in een functie. Laten we de buitenste functie <parent noemen, en de binnenste - <child:

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

Uit eerdere lessen weet je dat als je een variabele in de buitenste functie definieert - deze toegankelijk zal zijn in de binnenste:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // geeft 'abcde' weer
  }
  child(); // roept de binnenste functie aan
}

parent(); // roept de buitenste functie aan

Er is echter een nuance: de binnenste functie heeft toegang tot alle variabelen van de buitenste, maar heeft geen toegang tot <this. Dat wil zeggen: als de buitenste functie aan een DOM-element is gebonden, dan zal <this erin verwijzen naar dat element, maar <this van de binnenste functie - niet!

Waar zal <this van de binnenste functie dan naar verwijzen? Antwoord: het zal gelijk zijn aan <undefined (in de strikte modus), omdat de functie nergens aan is gebonden.

Laten we dit in de praktijk testen. Stel we hebben een input:

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

Laten we aan deze input de functie <parent binden, die wordt aangeroepen wanneer de input de focus verliest:

javascript"use strict";

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

// Wordt aangeroepen bij verlies van focus:
function parent() {
  // hier komt code
  
  function child() {
    // hier komt code
  }
  child(); // roept de kindfunctie aan
}

Laten we de inhoud van <this naar de console loggen op twee plaatsen: binnen de functie <parent en binnen de functie <child:

javascript"use strict";

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

function parent() {
  console.log(this); // geeft een verwijzing naar onze input weer
  
  function child() {
    console.log(this); // geeft undefined weer
  }
  child();
}

Voer deze code uit, laat de input de focus verliezen en kijk in de console - je zult zien dat de eerste <console.log in de console een verwijzing naar onze input weergeeft, en de tweede - gewoon <undefined. Een dergelijke situatie, waarin <this op een voor ons onverwachte manier niet verwijst naar wat we nodig hebben, wordt <verlies van context genoemd.

javascript"use strict";

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

function parent() {
  console.log(this.value); // wat wordt er weergegeven?
  
  function child() {
    console.log(this.value); // wat wordt er weergegeven?
  }
  child();
}