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();
}