Verlust des Kontexts in JavaScript

Nehmen wir an, wir haben eine Funktion in einer Funktion. Nennen wir die äußere Funktion parent und die innere child:

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

Aus vorherigen Lektionen wissen Sie, dass, wenn eine Variable in der äußeren Funktion gesetzt wird - sie in der inneren verfügbar sein wird:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // gibt 'abcde' aus
  }
  child(); // rufen die innere Funktion auf
}

parent(); // rufen die äußere Funktion auf

Es gibt jedoch einen Nuance: Die innere Funktion hat Zugriff auf alle Variablen der äußeren, hat aber keinen Zugriff auf this. Das heißt: Wenn die äußere Funktion an ein DOM-Element gebunden ist, dann wird this in ihr auf dieses Element zeigen, aber this der inneren Funktion - wird es nicht!

Worauf wird dann this zeigen der inneren Funktion? Antwort: Es wird gleich undefined sein (im strikten Modus), da die Funktion an nichts gebunden ist.

Lassen Sie uns das in der Praxis überprüfen. Nehmen wir an, wir haben ein Input-Feld:

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

Binden wir an dieses Input-Feld die Funktion parent, die beim Verlust des Fokus durch das Input-Feld aufgerufen wird:

javascript"use strict";

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

// Wird beim Verlust des Fokus aufgerufen:
function parent() {
  // hier wird irgendein Code sein
  
  function child() {
    // hier wird irgendein Code sein
  }
  child(); // rufen die Kindfunktion auf
}

Lassen Sie uns den Inhalt von this an zwei Stellen in der Konsole ausgeben: innerhalb der Funktion parent und innerhalb der Funktion child:

javascript"use strict";

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

function parent() {
  console.log(this); // gibt die Referenz auf unser Input-Feld aus
  
  function child() {
    console.log(this); // gibt undefined aus
  }
  child();
}

Starten Sie diesen Code, lassen Sie das Input-Feld den Fokus verlieren und schauen Sie in die Konsole - Sie werden sehen, dass der erste console.log in der Konsole die Referenz auf unser Input-Feld ausgibt, und der zweite - einfach undefined. Eine solche Situation, in der this auf unerwartete Weise nicht auf das zeigt, was wir brauchen, wird Verlust des Kontexts genannt.

javascript"use strict";

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

function parent() {
  console.log(this.value); // was wird ausgegeben?
  
  function child() {
    console.log(this.value); // was wird ausgegeben?
  }
  child();
}