I understand that this
inside an arrow function refers to a scope that's one level higher, and I remember like 2 months ago I was able to come up with an example of such case, but now, for the life of me, I cannot come up with a single example of this
being used to refer to a function that is one level up, and not the global object.
document.getElementById("testthis").addEventListener("click", ()=> {
alert(this.innerWidth)
})
<button id="testthis">TEST</button>
Here, this
refers to the higher scope, which in this case is the global object - window
.
Now If I want to put the event listener inside another function, is that function going to become the 'one level up' scope? If so, is this
now referring to it? If so, then what exactly does it refer to? Can you give me an example of this
refer to something inside the parent function?
function outer() {
document.getElementById("testthis").addEventListener("click", ()=> {
alert(this.innerWidth)
})
}
outer();
<button id="testthis">TEST</button>
I've used this
to refer again to innerWidth
, which is a property of the global object, and it works, so therefore, this
again refers to the global object, and not to the parent function. Why?
I'm so confused. Can somebody please make this clear for me.
Note: Yes, I've done plenty of research, but nobody talked about this particular question.