咨询JavaScript中IIFE（(function(){ })()）的具体工作原理

核心结构拆解 #

(function(){ })() 其实是两部分的组合：

• 第一部分：(function(){ })
  JavaScript 默认会把以 function 开头的代码识别为函数声明，而函数声明不能直接跟 () 执行（会报语法错误）。用括号把整个函数包裹起来，就把它转换成了函数表达式——此时它不再是一个“声明”，而是一个可以被操作的表达式值。
  除了括号，用 !、+ 这类一元运算符也能达到同样的效果，比如 !function(){ }()，但括号是最直观、最常用的写法。

• 第二部分：末尾的()
  这就是普通的函数调用语法，用来立即执行前面那个被转换成表达式的函数。

核心作用：隔离作用域 #

这也是你用它替代全局变量的关键原因：
IIFE 内部定义的所有变量、函数都是局部作用域的，不会挂载到全局对象（比如浏览器里的window）上，自然不会污染全局命名空间。
比如你之前的全局变量写法：

window.number = 0;
// 图片画廊逻辑修改number

换成IIFE后：

(function() {
  let number = 0;
  // 图片画廊的切换逻辑，直接操作局部的number
  document.querySelector('.gallery-next').addEventListener('click', () => {
    number++;
    console.log(`当前图片索引：${number}`);
  });
})();

这里的number只会存在于IIFE的内部作用域里，外部完全访问不到，也就不会和其他全局变量冲突。

额外细节：参数传递 #

如果需要在IIFE里访问全局对象（比如window），可以把它作为参数传入，这样既方便内部使用，还能在代码压缩时缩短变量名：

(function(win) {
  // 用win代替window，压缩时可以把win改成单个字母
  win.addEventListener('load', () => {
    // 初始化画廊
  });
})(window);

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