Pierderea contextului în JavaScript

Să presupunem că avem o funcție în interiorul altei funcții. Să numim funcția exterioară parent, iar funcția interioară - child:

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

Din lecțiile anterioare știți deja că dacă definiți o variabilă în funcția exterioară - ea va fi accesibilă în funcția interioară:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // va afișa 'abcde'
  }
  child(); // apelăm funcția interioară
}

parent(); // apelăm funcția exterioară

Există, totuși, o nuanță: funcția interioară are acces la toate variabilele funcției exterioare, dar nu are acces la this. Adică: dacă funcția exterioară este legată de un element DOM, atunci this în ea va indica către acel element, dar this din funcția interioară - nu va indica!

Atunci la ce va indica this în funcția interioară? Răspunsul: va fi egal cu undefined (în modul strict), deoarece funcția nu este legată de nimic.

Să verificăm în practică. Să presupunem că avem un input:

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

Să legăm de acest input funcția parent, care va fi apelată la pierderea focusului de către input:

javascript"use strict";

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

// Se va apela la pierderea focusului:
function parent() {
  // aici va fi un cod oarecare
  
  function child() {
    // aici va fi un cod oarecare
  }
  child(); // apelăm funcția copil
}

Să afișăm conținutul lui this în consolă în două locuri: în interiorul funcției parent și în interiorul funcției child:

javascript"use strict";

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

function parent() {
  console.log(this); // va afișa referința la input-ul nostru
  
  function child() {
    console.log(this); // va afișa undefined
  }
  child();
}

Rulați acest cod, pierdeți focusul input-ului și uitați-vă în consolă - veți vedea că primul console.log va afișa în consolă referința la input-ul nostru, iar al doilea - simplu undefined. O astfel de situație, când this într-un mod neașteptat pentru noi nu indică către ceea ce avem nevoie, se numește pierderea contextului.

javascript"use strict";

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

function parent() {
  console.log(this.value); // ce va afișa?
  
  function child() {
    console.log(this.value); // ce va afișa?
  }
  child();
}