Страта кантэксту ў 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();
}