Kupotea Muktadha katika JavaScript

Hebu tuchukue kuwa tuna kazi ndani ya kazi. Hebu tuiite kazi ya nje parent, na ya ndani - child:

javascriptfunction parent() {
  function child() {
    
  }
}

Kutoka masomo yaliyopita unajua kuwa ikiwa utaweka kutofautisha yoyote katika kazi ya nje - itapatikana katika kazi ya ndani:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // itatoa 'abcde'
  }
  child(); // tunaita kazi ya ndani
}

parent(); // tunaita kazi ya nje

Hata hivyo, kuna undani: kazi ya ndani ina ufikiaji wa kutofautisha zote za nje, lakini haina ufikiaji wa this. Hii inamaana: ikiwa kazi ya nje imeshikamana na kipengele cha DOM, basi this ndani yake itaelekeza kwenye kipengele hicho, lakini this ya kazi ya ndani -haitafanya hivyo!

Basi this ya kazi ya ndani itaelekeza wapi? Jibu: itakuwa sawa na undefined (katika hali mkali), kwa sababu kazi haishikamani na chochote.

Hebu tuangalie kwa vitendo. Hebu tuchukue tuna kipengele cha ingizo:

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

Tushikamishe kipengele hiki cha ingizo kazi parent, ambayo itaitwa pale ingizo linapopoteza umakini:

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

// Itaitwa pale kipoteza umakini:
function parent() {
  // kutakuwa na baadhi ya kificho hapa
  
  function child() {
    // kutakuwa na baadhi ya kificho hapa
  }
  child(); // tunaita kazi ya mtoto
}

Hebu tuonyeshe yaliyomo this kwenye konsoli katika sehemu mbili: ndani ya kazi parent na ndani ya kazi child:

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
  console.log(this); // itatoa kiungo kwenye kipengele chetu cha ingizo
  
  function child() {
    console.log(this); // itatoa undefined
  }
  child();
}

Washa kificho hiki, poteza umakini wa kipengele cha ingizo na uangalie kwenye konsoli - utaona kuwa kwanza console.log itatoa kwenye konsoli kiungo kwenye kipengele chetu cha ingizo, na ya pili - undefined tu. Hali kama hii, ambapo this kwa njia isiyotarajiwa haelekezi kwenye kile tunachohitaji, inaitwa kupotea muktadha.

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
  console.log(this.value); // kitatoa nini?
  
  function child() {
    console.log(this.value); // kitatoa nini?
  }
  child();
}