JavaScript-те контекст жоғалту

Бізде функцияның ішінде функция болсын. Сыртқы функцияны parent деп атайық, ал ішкісін - child:

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

Алдыңғы сабақтардан сіз білесіз, егер сыртқы функцияда кез келген айнымалыны орнатсаңыз - ол ішкі функцияда қолжетімді болады:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // шығарады 'abcde'
  }
  child(); // ішкі функцияны шақырамыз
}

parent(); // сыртқы функцияны шақырамыз

Алайда, нюанс бар: ішкі функция сыртқы функцияның барлық айнымалыларына қолжетімді, бірақ this-ке қолжетімді емес. Яғни: егер сыртқы функция қандай да бір DOM элементіне байланған болса, онда ондағы this осы элементке сілтеме жасайды, бірақ ішкі функцияның this-і - жасамайды!

Сонда ішкі функциядағы this неге сілтеме жасайды? Жауабы: ол undefined тең болады (қатаң режимде), себебі функция еш нәрсеге байланбаған.

Тәжірибеде тексерейік. Бізде инпут берілсін:

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

Осы инпутқа parent функциясын байлайық, ол инпут фокусы жоғалтқан кезде шақырылады:

javascript"use strict";

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

// Фокус жоғалтқанда шақырылады:
function parent() {
  // мұнда қандай да бір код болады
  
  function child() {
    // мұнда қандай да бір код болады
  }
  child(); // ішкі функцияны шақырамыз
}

this мазмұнын консольге екі жерден шығарайық: parent функциясының ішінде және child функциясының ішінде:

javascript"use strict";

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

function parent() {
  console.log(this); // біздің инпутқа сілтемені шығарады
  
  function child() {
    console.log(this); // undefined шығарады
  }
  child();
}

Бұл кодты іске қосыңыз, инпуттан фокусыңызды жоғалтыңыз және консольді қараңыз - сіз бірінші console.log консольде біздің инпутқа сілтемені шығаратынын, ал екіншісі - жай undefined шығаратынын көресіз. this біз күтпеген жолда бізге қажет нәрсеге емес, басқа нәрсеге сілтеме жасайтын мұндай жағдай контекст жоғалту деп аталады.

javascript"use strict";

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

function parent() {
  console.log(this.value); // не шығарады?
  
  function child() {
    console.log(this.value); // не шығарады?
  }
  child();
}