What is the lexical environment inside a callback function?

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?

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.