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 nimani кўрсатади? Жавоб: у 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 ning мазмунини икки жойда консольга чиқарайлик: 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();
}