Kontekstin menetys JavaScriptissä

Oletetaan, että meillä on funktio funktion sisällä. Kutsutaan ulompaa funktiota nimellä parent ja sisemmästä - child:

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

Aiemmista oppitunneista tiedät, että jos asetat minkä tahansa muuttujan ulompaan funktioon - se on saatavilla sisemmässä:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // tulostaa 'abcde'
  }
  child(); // kutsutaan sisempää funktiota
}

parent(); // kutsutaan ulompaa funktiota

On kuitenkin vivahde: sisemmällä funktiolla on pääsy kaikkiin ulomman funktion muuttujiin, mutta sillä ei ole pääsyä this:iin. Eli: jos ulompi funktio on sidottu johonkin DOM elementtiin, niin this siinä viittaa kyseiseen elementtiin, mutta this sisemmän funktion - ei viittaa!

Mihin sitten this sisemmässä funktiossa viittaa? Vastaus: se on yhtä suuri kuin undefined (tiukassa tilassa), koska funktio ei ole sidottu mihinkään.

Kokeillaan käytännössä. Oletetaan, että meillä on syöttökenttä:

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

Liitetään tähän syöttökenttään funktio parent, jota kutsutaan, kun syöttökenttä menettää fokuksensa:

javascript"use strict";

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

// Kutsutaan fokuksen menetyksen yhteydessä:
function parent() {
  // tässä on jotain koodia
  
  function child() {
    // tässä on jotain koodia
  }
  child(); // kutsutaan lapsifunktiota
}

Tuodaan this:n sisältö konsoliin kahdessa kohdassa: funktion parent sisällä ja funktion child sisällä:

javascript"use strict";

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

function parent() {
  console.log(this); // tulostaa viittauksen syöttökenttäämme
  
  function child() {
    console.log(this); // tulostaa undefined
  }
  child();
}

Suorita tämä koodi, hävitä syöttökentän fokus ja katso konsolia - näet, että ensimmäinen console.log tulostaa konsoliin viittauksen syöttökenttäämme, ja toinen - pelkän undefined:n. Tällaista tilannetta, jossa this odottamattomalla tavalla viittaa ei siihen, mitä tarvitsemme, kutsutaan kontekstin menetykseksi.

javascript"use strict";

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

function parent() {
  console.log(this.value); // mitä tulostaa?
  
  function child() {
    console.log(this.value); // mitä tulostaa?
  }
  child();
}