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)的主要内容,如果未能解决你的问题,请参考以下文章

javascript模块化编程-立即执行函数(IIFE)

JS-立即执行函数表达式(IIFE)

JS-立即执行函数表达式(IIFE)

javascript--立即执行函数

JavaScript IIFE

javascript 理解立即调用的函数表达式(IIFE)