页面加载匿名函数的作用：何时使用与何时不用？

你提到的两种写法核心区别在于作用域隔离，下面直接说明这个外层匿名函数（专业名叫立即调用函数表达式，简称IIFE）的实际意义，以及什么时候该用、什么时候不用：

一、IIFE的核心价值 #

1. 避免全局变量污染
   如果脚本里声明变量、函数却不包IIFE，这些变量默认会挂载到全局的window对象上。比如：

   // 不包IIFE的情况
   let count = 0;
   function increment() { count++; }
   

   此时count和increment会变成window.count、window.increment，若页面其他脚本也有同名变量，就会互相覆盖引发bug。而用IIFE包裹后，内部变量、函数都是局部作用域的，不会跑到全局：

   (() => {
     let count = 0;
     function increment() { count++; }
   })();
   

   外部根本访问不到内部的count和increment，自然不会和其他脚本冲突。

2. 保护内部逻辑
   有些内部辅助函数、临时变量，你不想让外部代码随意修改或访问，IIFE能帮你形成一个“私有作用域”，只有内部代码能操作这些内容，避免意外篡改。

3. 早期模块化方案
   在ES6模块（<script type="module">）出现之前，IIFE是前端实现模块化的常用手段——把每个功能模块的逻辑封装在自己的IIFE里，只对外暴露需要的接口，比如：

   const MyUtils = (() => {
     function privateHelper() { /* 内部辅助逻辑 */ }
     return {
       publicMethod: () => {
         privateHelper();
         // 对外提供的功能
       }
     };
   })();
   

   外部只能通过MyUtils.publicMethod调用，内部的privateHelper不会暴露出去。

二、什么时候该用IIFE #

• 当脚本包含多个变量、函数，不想让它们污染全局作用域时，比如写独立的工具脚本、组件逻辑脚本。
• 维护不支持ES6模块的老项目时，需要隔离不同脚本的作用域，避免变量冲突。
• 需要创建一次性临时作用域，执行完就销毁内部变量（现代JS引擎会自动优化内存，但逻辑上能避免全局冗余）。

三、什么时候不用IIFE #

• 脚本只有简单几行代码，没有声明任何额外变量或函数，比如你例子里只修改DOM元素样式的情况，用IIFE纯属多此一举，增加代码复杂度。
• 已经在使用ES6模块（<script type="module">）时，模块本身自带作用域隔离，内部变量默认都是局部的，不需要额外用IIFE。
• 代码本身已经处于隔离作用域内（比如React组件函数体、Vue的setup函数、事件回调内部），再包IIFE没有意义。

你给出的两种写法对比 #

第一种（带IIFE）：

<html>
<script>
    (() => {
        // do page load stuff here.
        document.getElementById("someId").style.color = "blue";
    })();
</script>
</html>

第二种（无IIFE）：

<html>
<script>
    // do page load stuff here.
    document.getElementById("someId").style.color = "blue";
</script>
</html>

这两种写法在这个场景下效果完全一致，因为你没有声明任何额外变量/函数，IIFE在这里属于冗余代码。

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