Perte de contexte en JavaScript

Supposons que nous ayons une fonction dans une fonction. Appelons la fonction externe parent, et la fonction interne - child :

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

D'après les leçons précédentes, vous savez que si vous définissez une variable dans la fonction externe, elle sera accessible dans la fonction interne :

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // affichera 'abcde'
  }
  child(); // appelons la fonction interne
}

parent(); // appelons la fonction externe

Il y a cependant une nuance : la fonction interne a accès à toutes les variables de la fonction externe, mais n'a pas accès à this. C'est-à-dire : si la fonction externe est liée à un élément DOM, alors this dans celle-ci pointera vers cet élément, mais this de la fonction interne - ne le fera pas !

Sur quoi va alors pointer this de la fonction interne ? Réponse : il sera égal à undefined (en mode strict), car la fonction n'est liée à rien.

Vérifions cela en pratique. Supposons que nous ayons un input :

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

Lions à cet input la fonction parent, qui sera appelée lors de la perte de focus de l'input :

javascript"use strict";

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

// Sera appelée lors de la perte de focus :
function parent() {
  // il y aura du code ici
  
  function child() {
    // il y aura du code ici
  }
  child(); // appelons la fonction enfant
}

Affichons le contenu de this dans la console à deux endroits : à l'intérieur de la fonction parent et à l'intérieur de la fonction child :

javascript"use strict";

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

function parent() {
  console.log(this); // affichera la référence vers notre input
  
  function child() {
    console.log(this); // affichera undefined
  }
  child();
}

Lancez ce code, provoquez la perte de focus de l'input et regardez la console - vous verrez que le premier console.log affichera dans la console la référence vers notre input, et le second - simplement undefined. Une telle situation, où this de manière inattendue pour nous ne pointe pas vers ce dont nous avons besoin, est appelée perte de contexte.

javascript"use strict";

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

function parent() {
  console.log(this.value); // qu'est-ce que cela affichera ?
  
  function child() {
    console.log(this.value); // qu'est-ce que cela affichera ?
  }
  child();
}