What is the lexical environment inside a callback function?

Question

I keep hearing that arrow functions inherit the value of this from their Lexical Environment.

Consider this example:

let para = document.getElementById("para");
let article = document.getElementById("article");

article.addEventListener("click", () => {
  console.log("I’m a <span> tag!", this);
  event.stopImmediatePropagation();
});
para.addEventListener("click", () => console.log("I’m a <p> tag!", this));

<p id="para">
  <span id="article">Click Me!</span>
</p>

Why is the value of this inside the arrow callback functions undefined (or in non-strict mode: window)? If the callback function is using the value of this from its lexical environment, shouldn’t the lexical environment be addEventListener?

I'd just think of it as this: whatever the value of `this` was when you created the function, that's also what it will be when the function runs. When you created the function, `this` was window. The fact that you then pass the function into addEventListener doesn't change anything. — Nicholas Tower, Nov 17 '21 at 03:52
And note that it really should be `undefined`, because you should be using strict mode everywhere anyway. In non-strict mode, it wouldn’t be `Window`, either, but `window`, which is the same as `globalThis`. — Sebastian Simon, Nov 17 '21 at 04:01
Thank you so much both of you, especially Sebastian. That line about evaluating arguments then calling the function clicked with me. — Abhinav Jha, Nov 17 '21 at 04:33

score 0 · Answer 1 · answered Nov 17 '21 at 04:38

I think you should check out the Arrow Function on MDN they fully explained what the arrow function is and compared the traditional function to the arrow function.

According to MDN:

Arrow function does not have its own bindings to this or super, and should not be used as methods.

Therefore, in your case, the arrow function is not gonna redefined this that means this is window object

And the traditional function is redefined this from what a function is called.

para.addEventListener("click", function () {
    console.log(this);  // print p node elemnt
});

score 0 · Accepted Answer · answered Nov 17 '21 at 05:31

When you call a function as func(a, b), then first, a is evaluated, then b is evaluated, then func is called with the values of a and b. a and b are not “inside” func.

It doesn’t matter which of the following code snippets you use — these are equivalent:

const a = () => console.log(this);

addEventListener("click", a);

addEventListener("click", () => console.log(this));

addEventListener does attempt to call its second argument with this set to the event’s currentTarget, but as explained in the documentation and various other Q&A, arrow functions cannot be rebound:

"use strict";

(() => console.log(this)).call({ "my": "object" }); // Logs `undefined`.

I’m not quite sure what you mean by “shouldn’t the lexical enironment be addEventListener?”. The lexical scope of an arrow function is the one it’s created in. As an arrow function is created, its scope and a special “lexical-this” flag are used to create a function object. And when called, note that the attempt to perform the OrdinaryCallBindThis abstract operation, which normally sets this, does nothing for arrow functions. Instead, the function body is executed as-is, in its original context.

Looking at your original code again, note that every single this is part of the same lexical environment — in fact, this is the same, in this code, no matter where you put it. Note, in particular, that function arguments don’t create a new lexical environment.

"use strict";

this; // `undefined`.

let para = document.getElementById("para", this); // Ignored argument, but is `undefined`.
let article = document.getElementById("article");

article.addEventListener("click", () => {
  console.log(this); // Logs `undefined`.
  event.stopImmediatePropagation();
});
para.addEventListener("click", (this, () => console.log(this))); // Logs `undefined`. Preceded by comma operator with discarded value `this`, but would be `undefined`.

In contrast, a function function would create a new lexical environment and would also be able to be rebound:

article.addEventListener("click", function(){
  console.log(this); // Logs `article`.
});

See How does the “this” keyword work? for a more detailed explanation.

What is the lexical environment inside a callback function?

2 Answers2