Загуба на контекст в 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 (в строг режим), тъй като функцията не е свързана с нищо.

Нека проверим на практика. Нека имаме input поле:

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

Нека свържем към това input поле функцията parent, която ще се извиква при загуба на фокус от input полето:

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); // ще изведе препратка към нашето input поле
  
  function child() {
    console.log(this); // ще изведе undefined
  }
  child();
}

Стартирайте този код, загубете фокуса на input полето и погледнете в конзолата - ще видите, че първият console.log ще изведе в конзолата препратка към нашето input поле, а вторият - просто 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();
}