Creo que deberías consultar la función de flecha en MDN , explicaron completamente qué es la función de flecha y compararon la función tradicional con la función de flecha.

Según MDN:

La función de flecha no tiene sus propios enlaces a this o super, y no debe usarse como método.

Por lo tanto, en su caso, la función de flecha no va a redefinir this , lo que significa que this es un objeto window

Y la función tradicional se redefine this a partir de lo que se llama una función.

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

Cuando llama a una función como func(a, b) , primero se evalúa a , luego se evalúa b , luego se llama a func con los valores de a y b . a y b no son funciones " func ".

No importa cuál de los siguientes fragmentos de código utilice, estos son equivalentes:

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

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

addEventListener intenta llamar a su segundo argumento con this conjunto al currentTarget del evento, pero como se explica en la documentación y en varias otras preguntas y respuestas , las funciones de flecha no se pueden recuperar :

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

No estoy muy seguro de lo que quiere decir con "¿no debería ser addEventListener el entorno léxico?" . El ámbito léxico de una función de flecha es aquel en el que se crea. A medida que se crea una función de flecha , su ámbito y un indicador especial "léxico-esto" se utilizan para crear un objeto de función. Y cuando se le llame , tenga en cuenta que el intento de realizar la operación abstracta OrdinaryCallBindThis, que normalmente establece this , no hace nada para las funciones de flecha. En su lugar, el cuerpo de la función se ejecuta tal cual, en su contexto original.

Mirando su código original nuevamente, tenga en cuenta que cada uno de this es parte del mismo entorno léxico; de hecho, this es lo mismo, en este código, sin importar dónde lo coloque. Tenga en cuenta, en particular, que los argumentos de función no crean un nuevo entorno léxico.

 "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`.

Por el contrario, una function función crearía un nuevo entorno léxico y también podría ser reencuadernada:

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

Consulte ¿Cómo funciona la palabra clave "esto"? para una explicación más detallada.