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();
}