javascript立即执行函数表达式(IIFE)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)的主要内容,如果未能解决你的问题,请参考以下文章