Humbja e Kontekstit në JavaScript

Le të themi se kemi një funksion brenda një funksioni. Le ta quajmë funksionin e jashtëm parent, ndërsa atë të brendshëm - child:

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

Nga mësimet e mëparshme ju e dini se nëse caktoni ndonjë variabël në funksionin e jashtëm - ajo do të jetë e disponueshme në atë të brendshëm:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // do të shfaqë 'abcde'
  }
  child(); // therrasim funksionin e brendshëm
}

parent(); // therrasim funksionin e jashtëm

Megjithatë, ka një nuancë: funksioni i brendshëm ka qasje në të gjitha variablat e jashtme, por nuk ka qasje në this. Kjo do të thotë: nëse funksioni i jashtëm është i lidhur me një element DOM, atëherë this në të do të tregojë për atë element, por this i funksionit të brendshëm - nuk do!

Për çfarë do të tregojë atëherë this i funksionit të brendshëm? Përgjigja: ai do të jetë i barabartë me undefined (në mënyrën strikte), pasi funksioni nuk është i lidhur me asgjë.

Le ta verifikojmë në praktikë. Le të themi se kemi dhënë një input:

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

Le ta lidhim këtë input me funksionin parent, i cili do të thirret kur inputi humb fokusin:

javascript"use strict";

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

// Do të thirret kur humbet fokusi:
function parent() {
  // këtu do të ketë ndonjë kod
  
  function child() {
    // këtu do të ketë ndonjë kod
  }
  child(); // therrasim funksionin fëmijë
}

Le të shfaqim përmbajtjen e this në konsol në dy vende: brenda funksionit parent dhe brenda funksionit child:

javascript"use strict";

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

function parent() {
  console.log(this); // do të shfaqë lidhjen për input-in tonë
  
  function child() {
    console.log(this); // do të shfaqë undefined
  }
  child();
}

Ekzekutoni këtë kod, humbni fokusin e input-it dhe shikoni në konsol - do të shihni se console.log i parë do të shfaqë në konsol lidhjen për input-in tonë, ndërsa i dyti - thjesht undefined. Një situatë e tillë, kur this në mënyrë të papritur për ne nuk tregon për atë që na duhet, quhet humbje e kontekstit.

javascript"use strict";

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

function parent() {
  console.log(this.value); // çfarë do të shfaqë?
  
  function child() {
    console.log(this.value); // çfarë do të shfaqë?
  }
  child();
}