JavaScript-de kontekstiň ýitirilmegi

Içinde funksiýa bolan funksiýamyz bar bolsun. Daşarky funksiýany parent, içerki funksiýany bolsa child diýip atlandyralyň:

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

Öňki sapaklardan bilýäňiz, daşarky funksiýada islendik üýtgeýjini kesgitlek mümkin bolsa, oňa içerki funksiýadanam girip bolýar:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // 'abcde' çap eder
  }
  child(); // içerki funksiýany çagyralyň
}

parent(); // daşarky funksiýany çagyralyň

Emma, bir nüans bar: içerki funksiýa daşarkynyň ähli üýtgeýjänlerine girip bilýär, ýöne this girip bilmeýär. Ýagny: eger daşarky funksiýa haýsydyr bir DOM elementine baglanan bolsa, onda onda this şol elemente görkezer, ýöne içerki funksiýanyň this - görkezmez!

Içerki funksiýanyň this näme görkezer? Jogaby: ol şuňa deň bolar undefined (gaty tertipte), sebäbi funksiýa hiç zat bilen baglanyşykly däl.

Amalda barlap göräýli. Bizde bir input bolsun:

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

Şu input bilen parent funksiýasyny baglalyň, oňa input fokusy ýitireninde çagyrylar:

javascript"use strict";

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

// Fokus ýitirilende çagyrylar:
function parent() {
  // bu ýerde käbir kod bolar
  
  function child() {
    // bu ýerde käbir kod bolar
  }
  child(); // çaga funksiýany çagyralyň
}

this mazmunyny konsolde iki ýerde çap edeliň: parent funksiýasynyň içinde we child funksiýasynyň içinde:

javascript"use strict";

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

function parent() {
  console.log(this); // biziň inputymyza çykgyt çap eder
  
  function child() {
    console.log(this); // undefined çap eder
  }
  child();
}

Bu kody işlediň, inputdan fokusa ýitiriň we konsola serediň - ilkinji console.log konsolda biziň inputymyza çykgyt çap edýändigini, ikinjisiniň bolsa diňe undefined çap edýändigini görersiňiz. this gözleýän zadymyza däl-de, biz üçin gözlenilmedik ýagdaýda başga bir zada görkezýän bu ýagdaýa kontekstiň ýitirilmegi diýilýär.

javascript"use strict";

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

function parent() {
  console.log(this.value); // näme çap eder?
  
  function child() {
    console.log(this.value); // näme çap eder?
  }
  child();
}