为何在此场景下使用JavaScript的this关键字而非ele参数？

我在某课程中看到一段代码，功能是点击指定<p>元素后，移除所有拥有edit类的元素的该类，再为被点击的<p>元素添加edit类。代码运行正常，但我疑惑为何课程作者使用this关键字而非ele参数来添加类，尝试替换为ele后代码也能正常运行。

原代码 #

JavaScript代码

let elements = document.querySelectorAll("p");

elements.forEach(function (ele) {

    ele.onclick = function () {
        elements.forEach(function (ele) {
            ele.classList.remove("edit");
        })
    
        this.classList.add("edit");
    }
})

HTML代码

<body>
    <p>Mustapha</p>
    <p>Ali</p>
    <p>Osama</p>
    <p>Hamza</p>
</body>

问题解答 #

在这段代码里，用this和外层的ele确实都能实现功能，核心原因是两者指向的是同一个DOM元素——被点击的<p>标签，但它们的来源和使用逻辑有细微区别：

• this是事件处理函数的默认绑定行为：当给DOM元素绑定普通函数作为事件处理器时，函数执行时this会自动指向触发事件的元素，这是JavaScript原生事件机制的标准特性，语义上直接对应“当前触发事件的元素”，是很多开发者的习惯写法。
• 外层的ele是forEach循环遍历到的当前元素，因为事件处理函数定义在forEach的回调内部，形成了闭包，所以它能访问到外层作用域的ele变量，自然也能操作该元素。

作者选择this更多是编码习惯的考量：

• this不依赖外层作用域的变量名，哪怕把外层的ele改成item之类的其他名称，事件处理里的this依然能正常工作，代码耦合性更低。
• 这是原生事件处理的常规写法，在传统JS项目或教程中很常见，符合事件驱动的直觉逻辑。

不过你替换成ele能运行也完全没问题，在这个特定场景下，两者的功能效果完全一致。

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