箭头函数本身不会导致全局污染，真正问题在于内联事件处理器中直接写箭头函数（如 onclick="() => {...}"），因HTML属性值是字符串，浏览器仅支持传统函数语法，不解析ES6+语法；正确做法是用addEventListener绑定箭头函数，或封装为命名函数在内联中调用。
箭头函数本身不会导致全局污染，真正引发问题的是：在内联事件处理器中直接写箭头函数（如 onclick="() => {...}"），这在 HTML 中根本无法运行——因为浏览器只执行字符串形式的 JavaScript，而箭头函数是语法结构，不能直接放在字符串里解析执行。
内联 HTML 事件属性不支持箭头函数语法
HTML 的 onclick、oninput 等属性值是字符串，浏览器会用 new Function() 类似机制去执行它，只接受传统函数体语句（如 console.log(1)），不支持 =>、const、解构等 ES6+ 语法。
以下写法是错误且无效的：
立即学习“Java免费学习笔记（深入）”；
ImageMagick 批处理处理器
下载
使用 ImageMagick 的 convert 和 mogrify 命令进行批量图像处理，支持调整大小、裁剪、水印和格式转换。与 libvips 集成以实现高性能缩略图生成。
悬停
它们不会报错，但也不会触发任何行为——因为浏览器无法解析这些语法。
正确做法：用 DOM API 绑定箭头函数
想用箭头函数写事件处理器，必须脱离内联 HTML，改用 addEventListener，这样函数才能被正常定义和闭包捕获：
- 在 JS 文件或
<script></script>块中获取元素，然后绑定 - 箭头函数可自然捕获外层作用域变量，无需担心
this指向问题 - 避免了把逻辑硬编码在 HTML 中，利于维护和复用
示例：
const btn = document.getElementById('myBtn');<br>
btn.addEventListener('click', () => {<br>
console.log('点击了，this 是 window 吗？不，这里没用到 this');<br>
});
如果非要用内联方式，只能写传统函数调用
若因历史原因必须保留内联写法（不推荐），应把逻辑封装进命名函数，再在 HTML 中调用：
- 定义一个具名函数（挂载在
window或模块作用域下） - HTML 中仅调用该函数名，不写箭头函数或复杂表达式
- 函数内部可用箭头函数，但注意不要意外泄露变量到全局
安全示例：
<script><br>
// 封装在 IIFE 中，避免污染全局<br>
(() => {<br>
function handleClick() {<br>
const log = (msg) => console.log('[按钮]' + msg); // 箭头函数在内部安全使用<br>
log('被点了');<br>
}<br>
// 暴露给内联事件唯一需要的入口<br>
window.myButtonClick = handleClick;<br>
})();<br>
</script><br>
<button onclick="myButtonClick()">点我</button>
更现代的替代方案：用框架或组件化思路
真实项目中，应避免内联事件和手动 DOM 操作：
- Vue/React/Svelte 等框架自动处理事件绑定与作用域，天然支持箭头函数写法
- 使用原生 Web Components 时，也在
connectedCallback中用addEventListener绑定 - 所有逻辑集中于 JS，HTML 只负责结构，彻底规避全局污染风险
