Губење на контекст во 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();
}