Context loss in JavaScript

Let's say we have a function within a function. Let's call the outer function parent and the inner one child:

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

From previous lessons you know that if you set any variable in the outer function, it will be available in the inner one

function parent() { let str = 'abcde'; function child() { console.log(str); // shows 'abcde' } child(); // calls the inner function } parent(); // calling the outer function

There is, however, a nuance: the inner function has access to all variables of the outer one, but does not have access to this. That is: if an external function is bound to some DOM element, then this in it will point to this element, but this of the inner function will not!

What would this of the inner function point to then? Answer: it will be equal to undefined (in strict mode) since the function is not bound to anything.

Let's check in practice. Let us have an input:

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

Let's attach the function parent to this input, which will be called when the input loses focus:

"use strict"; let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); // Called on loss of focus: function parent() { // there will be some code function child() { // there will be some code } child(); // calls child function }

Let's print the contents of this to the console in two places: inside the parent function and inside the child function:

"use strict"; let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); function parent() { console.log(this); // will display the reference to our input function child() { console.log(this); // will display undefined } child(); }

Run this code, lose focus to the input and look at the console - you will see that the first console.log will print a reference to our input to the console, and the second will just undefined. This situation, when this, in an unexpected way for us, indicates not what we need, is called context loss.

Let now in one and in the second function we will display value of the input. Determine what will be displayed in the lines of code marked with comments:

"use strict"; let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); function parent() { console.log(this.value); // what will output? function child() { console.log(this.value); // what will output? } child(); }
enru