Konteksti kaotamine JavaScriptis

Oletame, et meil on funktsioon funktsioonis. Nimetame välisfunktsiooni parent-iks ja sisefunktsiooni child-iks:

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

Eelmistest õppetükkidest teate, et kui määrata mingi muutuja välisfunktsioonis - on see kättesaadav sisefunktsioonis:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // väljastab 'abcde'
  }
  child(); // kutsume sisefunktsiooni
}

parent(); // kutsume välisfunktsiooni

Siiski on nüanss: sisefunktsioonil on juurdepääs kõikidele välisfunktsiooni muutujatele, kuid tal ei ole juurdepääsu this-ile. See tähendab: kui välisfunktsioon on seotud mõne DOM elemendiga, siis this selles viitab sellele elemendile, kuid this sisefunktsioonis ei viita!

Millele siis this sisefunktsioonis viitab? Vastus: see on võrdne undefined-ga (ranget režiimi), kuna funktsioon pole millegagi seotud.

Kontrollime seda praktikas. Oletame, et meil on antud input:

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

Seome selle inputiga funktsiooni parent, mida kutsutakse välja inputi fookuse kaotamisel:

javascript"use strict";

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

// Kutsutakse välja fookuse kaotamisel:
function parent() {
  // siin on mingi kood
  
  function child() {
    // siin on mingi kood
  }
  child(); // kutsume lapsefunktsiooni
}

Väljastame this sisu konsooli kahes kohas: funktsiooni parent sees ja funktsiooni child sees:

javascript"use strict";

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

function parent() {
  console.log(this); // väljastab viite meie inputile
  
  function child() {
    console.log(this); // väljastab undefined
  }
  child();
}

Käivitage see kood, kaotage inputi fookus ja vaadake konsooli - näete, et esimene console.log väljastab konsooli viite meie inputile, ja teine - lihtsalt undefined. Sellist olukorda, kus this ootamatult viitab mitte sellele, mida me vajame, nimetatakse konteksti kaotamiseks.

javascript"use strict";

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

function parent() {
  console.log(this.value); // mida väljastab?
  
  function child() {
    console.log(this.value); // mida väljastab?
  }
  child();
}