Tap av kontekst i JavaScript

La oss si at vi har en funksjon inni en funksjon. La oss kalle den ytre funksjonen parent, og den indre - child:

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

Fra tidligere leksjoner vet du at hvis du setter en variabel i den ytre funksjonen - vil den være tilgjengelig i den indre:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // vil skrive ut 'abcde'
  }
  child(); // kaller den indre funksjonen
}

parent(); // kaller den ytre funksjonen

Det er imidlertid en nyanse: den indre funksjonen har tilgang til alle variablene til den ytre, men har ikke tilgang til this. Det vil si: hvis den ytre funksjonen er bundet til et DOM-element, vil this i den peke på det elementet, men this i den indre funksjonen - vil ikke!

Hva vil da this i den indre funksjonen peke på? Svar: den vil være lik undefined (i streng modus), fordi funksjonen ikke er bundet til noe.

La oss teste dette i praksis. La oss si at vi har et input-felt:

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

La oss binde funksjonen parent til dette input-feltet, som skal kalles når input-feltet mister fokus:

javascript"use strict";

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

// Kalles ved tap av fokus:
function parent() {
  // det vil være noe kode her
  
  function child() {
    // det vil være noe kode her
  }
  child(); // kaller barnefunksjonen
}

La oss skrive ut innholdet i this til konsollen på to steder: inne i funksjonen parent og inne i funksjonen child:

javascript"use strict";

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

function parent() {
  console.log(this); // vil skrive ut en referanse til input-feltet vårt
  
  function child() {
    console.log(this); // vil skrive ut undefined
  }
  child();
}

Kjør denne koden, la input-feltet miste fokus og se i konsollen - du vil se at den første console.log vil skrive ut en referanse til input-feltet vårt, og den andre - bare undefined. En slik situasjon, hvor this på en uventet måte ikke peker på det vi trenger, kalles tap av kontekst.

javascript"use strict";

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

function parent() {
  console.log(this.value); // hva vil skrives ut?
  
  function child() {
    console.log(this.value); // hva vil skrives ut?
  }
  child();
}