首页 > 代码库 > 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)