# Context basics in JavaScript

Let's say we have some function `func` that uses `this` inside:

`function func() { console.log(this.value); }`

What does `this` point to in this function? And we don't know. And JavaScript doesn't know. And the function itself doesn't know. That is, at the moment the function is created, what exactly `this` points to is not defined. And it will be determined only when this function is invoked.

Let us have some kind of input:

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

Let's bind our function `func` to this input so that it executes when the input loses focus. Now, at the moment the function is executed, `this` will point to our input:

`let elem = document.querySelector('#elem'); elem.addEventListener('blur', func); function func() { console.log(this.value); // will display 'text' on focus loss }`

But after all, we can have not only single input, but several:

`<input id="elem1" value="text1"> <input id="elem2" value="text2">`

And to each of these inputs we can bind our function `func`. In this case, for the first element, `this` at the time of the function call will point to first, and for the second - to second.

In practice, this means that `this` inside the function depends on which of the inputs we lost focus on:

`let elem1 = document.querySelector('#elem1'); elem1.addEventListener('blur', func); let elem2 = document.querySelector('#elem2'); elem2.addEventListener('blur', func); function func() { console.log(this.value); // will output either 'text1' or 'text2' }`

In general, this feature `this` is very convenient - we create just one function and bind it to any number of inputs. If `this` did not refer to the element in which the event occurred, then we would not have succeeded - we would have to create our own function with the same code for each input!

←→
↑
en ru