JavaScript 立即执行函数怎么用

早上刚打开电脑，同事就抱着笔记本过来问：“我写的代码为啥一刷新就报错？”点开一看，原来是他写的变量和页面上其他地方的变量重名了，被不小心覆盖了。其实这种问题，用“立即执行函数”就能轻松解决。

很多人刚学JavaScript的时候，会习惯写全局变量，比如直接在script标签里写var name = "小明"，如果另一个地方有人写了var name = "小红"，后面的代码就会用小红的值，轻则逻辑混乱，重则直接报错。就像你把自己的水杯放在客厅，家人也放了个一模一样的，最后喝到谁的水都分不清，这就是全局变量的“命名冲突”问题。

什么是立即执行函数？

简单说，就是写一段代码，写完之后马上让它跑起来，而且这段代码里的变量，不会跑到外面去捣乱。它的核心作用是“把变量关在一个小房间里，不影响外面，也不受外面影响”。

举个生活化的例子：你买了个DIY盲盒，拆的时候的操作和里面的小玩具，只有你拆的时候能碰到，拆完之后把盒子扔了，里面的小玩具不会跑到客厅里，别人也拿不到。这个“拆完就销毁、里面的东西不外露”的盒子，就类似立即执行函数的效果。

怎么写一个立即执行函数？

很多人刚接触的时候会觉得写法有点绕，其实记住一个关键规则：把函数套在括号里，再加上执行的括号就行。最常见的写法是：

`javascript

(function() {

// 这里是你要执行的代码

var msg = "我是内部变量";

console.log(msg); // 这里能打印出“我是内部变量”

})();

`

你看，函数外面套了一层括号(function(){...})，最后加了()，这就是让这个函数立刻执行的意思。那为啥要套括号？如果不套的话，浏览器会把function当成函数声明，而函数声明必须有名字，不然会报错，套上括号就变成了“函数表达式”，不需要名字，直接就能执行。

还有一种常用的写法，是把函数和执行括号都放在括号里：(function(){...}())，效果是一样的，就像你把盲盒的盒子和拆盒的动作都放在同一个包装里，一拆就完成。

立即执行函数的实际用法

刚才说的同事的问题，就能用这个解决。比如你要写一段处理页面弹窗的代码，里面用到了变量popupState，直接写全局的话，很容易和其他地方的变量重名。用立即执行函数的话，就不会有这个问题：

`javascript

// 这段代码一加载就跑，变量不会影响外面

(function() {

var popupState = "closed"; // 只有这个函数能用到的变量

function togglePopup() {

if (popupState === "closed") {

popupState = "open";

console.log("弹窗打开了");

} else {

popupState = "closed";

console.log("弹窗关闭了");

}

}

// 给按钮绑定点击事件

document.getElementById("popupBtn").addEventListener("click", togglePopup);

})();

`

这段代码里，popupState、togglePopup这些变量，都被关在这个小函数里，外面的代码根本碰不到，就算其他地方有叫popupState的变量，也不会互相干扰，完美解决了命名冲突。

还有一种情况，如果你要给其他代码传参数，也可以在执行括号里加参数。比如你要获取页面的标题，把标题传给立即执行函数用：

`javascript

(function(title) {

console.log(当前页面标题是：${title});

})(document.title);

`

这样就把外部的参数传给了内部，既灵活又不会污染全局变量。

新手要注意的小细节

很多新手容易犯的错误，比如忘记加最后的执行括号，或者把括号放错位置，比如写成function(){...}()，这样浏览器会报错，因为它会认为你只是写了一个函数，没有让它执行。还有，如果你用箭头函数的话，写法也差不多：(() => { ... })();，效果完全一样，只是写法更简洁。

其实立即执行函数的本质，就是利用了JavaScript的“函数作用域”，每个函数都会产生一个独立的作用域，里面的变量不会影响外面，这就是它能解决问题的核心。就像你在家关上门，里面的事不会被邻居知道，外面的事也不会打扰到你，这就是作用域的魅力，而立即执行函数，就是把这个作用域用在需要马上执行的代码里，既安全又方便。