Perda de contexto em JavaScript

Suponha que temos uma função dentro de outra função. Vamos chamar a função externa de parent e a interna de child:

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

Das lições anteriores, você sabe que se definir qualquer variável na função externa - ela estará disponível na função interna:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // exibirá 'abcde'
  }
  child(); // chamamos a função interna
}

parent(); // chamamos a função externa

No entanto, há uma nuance: a função interna tem acesso a todas as variáveis da função externa, mas não tem acesso ao this. Ou seja: se a função externa estiver vinculada a algum elemento DOM, então this nela apontará para esse elemento, mas o this da função interna - não apontará!

Para onde então o this da função interna apontará? Resposta: ele será igual a undefined (no modo estrito), pois a função não está vinculada a nada.

Vamos testar na prática. Suponha que temos um input:

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

Vamos vincular a este input a função parent, que será chamada quando o input perder o foco:

javascript"use strict";

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

// Será chamada ao perder o foco:
function parent() {
  // haverá algum código aqui
  
  function child() {
    // haverá algum código aqui
  }
  child(); // chamamos a função filha
}

Vamos exibir o conteúdo de this no console em dois lugares: dentro da função parent e dentro da função child:

javascript"use strict";

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

function parent() {
  console.log(this); // exibirá a referência ao nosso input
  
  function child() {
    console.log(this); // exibirá undefined
  }
  child();
}

Execute este código, faça o input perder o foco e olhe no console - você verá que o primeiro console.log exibirá no console a referência ao nosso input, e o segundo - simplesmente undefined. Esta situação, em que o this de forma inesperada para nós não aponta para o que precisamos, é chamada de perda de contexto.

javascript"use strict";

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

function parent() {
  console.log(this.value); // o que exibirá?
  
  function child() {
    console.log(this.value); // o que exibirá?
  }
  child();
}