Контексти this дар 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();
}