Pérdida de contexto en JavaScript

Supongamos que tenemos una función dentro de otra. Llamemos a la función externa parent y a la interna - child:

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

Por lecciones anteriores sabes que si se establece alguna variable en la función externa, estará disponible en la interna:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // mostrará 'abcde'
  }
  child(); // llamamos a la función interna
}

parent(); // llamamos a la función externa

Sin embargo, hay un matiz: la función interna tiene acceso a todas las variables de la externa, pero no tiene acceso a this. Es decir: si la función externa está vinculada a algún elemento DOM, entonces this en ella apuntará a ese elemento, ¡pero this de la función interna - no lo hará!

¿A qué apuntará entonces this de la función interna? Respuesta: será igual a undefined (en modo estricto), ya que la función no está vinculada a nada.

Comprobemos esto en la práctica. Supongamos que tenemos un input:

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

Vinculamos a este input la función parent, que se llamará cuando el input pierda el foco:

javascript"use strict";

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

// Se llamará al perder el foco:
function parent() {
  // aquí habrá algún código
  
  function child() {
    // aquí habrá algún código
  }
  child(); // llamamos a la función hija
}

Mostremos el contenido de this en la consola en dos lugares: dentro de la función parent y dentro de la función child:

javascript"use strict";

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

function parent() {
  console.log(this); // mostrará la referencia a nuestro input
  
  function child() {
    console.log(this); // mostrará undefined
  }
  child();
}

Ejecuta este código, haz que el input pierda el foco y mira la consola: verás que el primer console.log mostrará en la consola la referencia a nuestro input, y el segundo - simplemente undefined. Esta situación, cuando this de manera inesperada para nosotros apunta no a lo que necesitamos, se llama pérdida de contexto.

javascript"use strict";

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

function parent() {
  console.log(this.value); // ¿qué mostrará?
  
  function child() {
    console.log(this.value); // ¿qué mostrará?
  }
  child();
}