首页 > 代码库 > javascript立即执行函数表达式（IIFE）
javascript立即执行函数表达式（IIFE）
常用的两种写法：
(function(){ /* code */ }()); （推荐写法）
(function(){ /* code */ })();
Q:为什么这样写，函数就嗯那个立即执行？
A:因为在javascript里，括号内部不能包含语句，当解析器对代码进行解释的时候，先碰到了()，然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明。
eg：如下代码就会报错。
function(){ /* code */ }(); // SyntaxError: Unexpected token (
why？！因为在javascript代码解释时，当遇到function关键字时，会默认把它当做是一个函数声明，而不是函数表达式，如果没有把它显视地表达成函数表达式，就报错了，因为函数声明需要一个函数名，而上面的代码中函数没有函数名。（以上代码，也正是在执行到第一个左括号(时报错，因为(前理论上是应该有个函数名的。）
立即执行函数与闭包的暧昧关系：
像普通的函数传参一样，立即执行函数也能传参数。如果在函数内部再定义一个函数，而里面的那个函数能引用外部的变量和参数（闭包），利用这一点，我们能使用立即执行函数锁住变量保存状态。通过以下两段代码可更好理解：
<body> <div>0</div> <div>1</div> <div>2</div> <div>3</div></body><script> var nodes = document.getElementsByTagName("div"); for (var i = 0; i < nodes.length; i++) { nodes[i].onclick = function () { console.log(i); } }</script>
//一次点击div，输出的结果却不是0~3，输出的都是3。这是为什么呢？！因为div节点的onclick事件是被异步触发的，当事件被触发的时候，for循化早已结束，此时变量 i 已经是3，所以div的onclick事件函数终顺着作用域从内到外查找变量变量i时，查到的值总是3。那样怎么办才能得到想要的呢？
<body> <div>0</div> <div>1</div> <div>2</div> <div>3</div></body><script> var nodes = document.getElementsByTagName("div"); for (var i = 0; i < nodes.length; i++) { (function (i) { nodes[i].onclick = function () { console.log(i); } })(i) }</script>
//此时控制台就会输出对应的值了，为什么呢？因为在立即执行函数内部 i 的值被锁在内存中，尽管for循环结束后 i 的值已经改变，但是立即执行函数内部 i 的值并不会改变。
立即执行函数在模块化中的用处：
用立即执行函数处理模块化可以减少全局变量造成的空间污染，构造更多的私有变量。
// 创建一个立即执行的匿名函数// 该函数返回一个对象，包含你要暴露的属性// 如下代码如果不使用立即执行函数，就会多一个属性i// 如果有了属性i，我们就能调用counter.i改变i的值 var counter = (function(){ var i = 0; return { get: function(){ return i; }, set: function( val ){ i = val; }, increment: function() { return ++i; } };})();
// counter其实是一个对象
counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5
counter.i; // undefined i并不是counter的属性
i; // ReferenceError: i is not defined (函数内部的是局部变量)
原文：Immediately-Invoked Function Expression (IIFE)
G~G~ Study。
javascript立即执行函数表达式（IIFE）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。