回调函数内部的Lexical Environment是什么？箭头函数this指向疑问

核心问题解答 #

你混淆了词法作用域的定义位置和函数的执行位置两个概念，箭头函数的this绑定规则完全由前者决定：

• 箭头函数本身没有独立的this，它的this固定继承自自身代码定义时外层词法作用域的this，绑定关系在函数定义时就已经确定，后续无论在哪里调用、用什么方式调用都不会被修改。
• 你传入addEventListener的箭头回调，代码直接写在全局作用域下，外层词法作用域就是全局，所以继承的就是全局的this：严格模式下全局this为undefined，非严格模式下为window，这就是你拿到对应输出的原因。

为什么词法环境不是addEventListener？ #

addEventListener只是回调函数的调用方，不是回调函数的词法父作用域：

词法作用域完全由代码书写的物理位置决定，和函数的调用位置、调用逻辑没有任何关系。

你写的箭头回调是作为参数传递给addEventListener的，它的定义位置是全局代码，并非写在addEventListener的函数体内部，自然不可能继承addEventListener内部的this。
补充说明：如果用普通函数作为addEventListener的回调，触发时this指向绑定事件的DOM元素，是因为浏览器调用普通函数时主动做了this绑定，但这个逻辑对箭头函数完全无效——箭头函数的this无法被任何调用逻辑修改，哪怕是call/apply/bind也不能改变它的指向。

示例完整代码 #

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>

内容的提问来源于stack exchange，提问作者Abhinav Jha