Konteksto praradimas JavaScript

Tarkime, kad turime funkciją funkcijoje. Išorinę funkciją pavadinkime parent, o vidinę - child:

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

Iš ankstesnių pamokų žinote, kad jei kintamajam priskirsime reikšmę išorinėje funkcijoje - jis bus prieinamas vidinėje:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // išves 'abcde'
  }
  child(); // iškviečiame vidinę funkciją
}

parent(); // iškviečiame išorinę funkciją

Tačiau yra niuansas: vidinė funkcija turi prieigą prie visų išorinės funkcijos kintamųjų, bet neturi prieigos prie this. Tai reiškia: jei išorinė funkcija yra susieta su kokiu nors DOM elementu, tai this joje rodys į tą elementą, tačiau this vidinės funkcijos - nerodys!

Į ką tuomet rodys this vidinėje funkcijoje? Atsakymas: jis bus lygus undefined ( griežtuoju režimu), nes funkcija nieko nėra pririšta.

Patikrinkime praktiškai. Tarkime, kad turime input elementą:

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

Pririškime prie šio input elemento funkciją parent, kuri bus iškviečiama praradus fokusą input elementui:

javascript"use strict";

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

// Bus iškviesta praradus fokusą:
function parent() {
  // čia bus kažkoks kodas
  
  function child() {
    // čia bus kažkoks kodas
  }
  child(); // iškviečiame vidinę funkciją
}

Išveskime this turinį į konsolę dviejose vietose: funkcijos parent viduje ir funkcijos child viduje:

javascript"use strict";

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

function parent() {
  console.log(this); // išves mūsų input elemento nuorodą
  
  function child() {
    console.log(this); // išves undefined
  }
  child();
}

Paleiskite šį kodą, input elementui praraskite fokusą ir pažiūrėkite į konsolę - pamatysite, kad pirmasis console.log išves į konsolę mūsų input elemento nuorodą, o antrasis - tiesiog undefined. Tokia situacija, kai this netikėtai mums rodo ne ten, kur mums reikia, vadinama konteksto praradimu.

javascript"use strict";

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

function parent() {
  console.log(this.value); // ką išves?
  
  function child() {
    console.log(this.value); // ką išves?
  }
  child();
}