[js]What is the (function() { } )() construct in JavaScript?

最新推荐文章于 2025-08-12 10:15:52 发布

转载最新推荐文章于 2025-08-12 10:15:52 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文深入解析了JavaScript中立即调用函数表达式（IIFE）的概念，解释了其工作原理及为何常用于避免全局命名空间污染。同时，文章对比了IIFE与事件处理器如window.onload的区别，并介绍了使用ES6箭头函数编写IIFE的方法。

参考: https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript

(function() { } )()有时会看到这种写法

It’s an Immediately-Invoked Function Expression, or IIFE for short. It executes immediately after it’s created.

It has nothing to do with any event-handler for any events (such as document.onload).
Consider the part within the first pair of parentheses: (function(){})();....it is a regular function expression. Then look at the last pair (function(){})();, this is normally added to an expression to call a function; in this case, our prior expression.

This pattern is often used when trying to avoid polluting the global namespace, because all the variables used inside the IIFE (like in any other normal function) are not visible outside its scope.
This is why, maybe, you confused this construction with an event-handler for window.onload, because it’s often used as this:

(function(){
  // all your code here
  var foo = function() {};
  window.onload = foo;
  // ...
})();
// foo is unreachable here (it’s undefined)

Correction suggested by Guffa:

The function is executed right after it's created, not after it is parsed. The entire script block is parsed before any code in it is executed. Also, parsing code doesn't automatically mean that it's executed, if for example the IIFE is inside a function then it won't be executed until the function is called.

Update Since this is a pretty popular topic, it's worth mentioning that IIFE's can also be written with ES6's arrow function (like Gajus has pointed out in a comment) :

((foo) => {
 // do something with foo here foo
})('foo value')