正文

javascript立即执行函数表达式（iife）

 2022-03-15  690

关键词：

常用的两种写法：

(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--立即执行函数

　　当函数被包含在一堆括号()内部就称为了一个表达式，通过在末尾上加上另一个()可以立即执行这个函数，这样的表达式就叫做立即执行函数表达式(ImmediatelyInvokedFunctionExpression，简称IIFE)，如：(function(){...})()或者(function(){...}... 查看详情

javascript函数

　　函数跟随一对圆括号()表示函数调用//函数声明语句写法functiontest(){};test();//函数表达式写法vartest=function(){};test();　　但有时需要在定义函数之后，立即调用该函数。这种函数就叫做立即执行函数，全称为立即调用的函数表... 查看详情

javascript要点1

1.IIFE（立即执行函数）　　立即执行函数，即ImmediatelyInvokedFunctionExpression(IIFE)，正如它的名字，就是创建函数的同时立即执行。它没有绑定任何事件，也无需等待任何异步操作：　　　　(function(){　　　　//代码　　})();　　funct... 查看详情

javascript理解立即调用的函数表达式（iife）(代码片段)

查看详情

立即调用函数（iife)

定义：IIFE:立即调用的函数表达式，声明函数的同时立即调用这个函数。语法：IIFE的常用写法：这两种写法的作用相同，只是表现形式不同而已,()只是起了自执行的作用（function()......）()把函数当作表达式解析，然后执... 查看详情

PHP中的IIFE（立即调用函数表达式）？

...】：2016-05-0419:45:13【问题描述】：我想知道PHP是否有类似Javascript的IIFE（立即调用函数表达式）的任何等价性。PHPClosure是否可以写成类似于Javascript（调用、依赖、注入、指令）的工作方式？(function()myModul 查看详情

iife（立即执行函数表达式）

...uction(){//dosomething})()这就是一个简单的IIFE（立即执行函数表达式，immediately-invokedfunctionexpression）了。这样的写法有什么好处呢？来简单分析一下。1.开头的分号我们都知道，js是可以加分号或者不加分号的，在某些情况下，不加... 查看详情

（转）扫盲--javascript的立即执行函数

看过jQuery源码的人应该知道，jQuery开篇用的就是立即执行函数。立即执行函数常用于第三方库，好处在于隔离作用域，任何一个第三方库都会存在大量的变量和函数，为了避免变量污染（命名冲突），开发者们想到的解决办法就... 查看详情

javascript要点(上)

立即执行函数即ImmediatelyInvokedFunctionExpression(IIFE)，正如它的名字，就是创建函数的同时立即执行。它没有绑定任何事件，也无需等待任何异步操作：(function(){console.log("js")})()function(){…}是一个匿名函数，包围它的一对括号将其转... 查看详情

立即调用的函数表达式（iife）(代码片段)

在JavaScript中，圆括号()是一种运算符，跟在函数名之后，表示调用该函数。比如，print()就表示调用print函数。有时，我们需要在定义行数之后，立即调用该函数。这时，你不能在函数的定义之后加上圆括号，这会产生语法错误。... 查看详情

iife的形式原理和常见写法(代码片段)

...第二部分再一次使用()创建了一个立即执行函数表达式，JavaScript引擎到此将直接执行函数。调用方法对比一下，这是不采用IIFE时的函数声明和函数调用，看段简单的代码：functionfoo()vara=10;console.log(a);foo();下面是IIFE形式的函数调... 查看详情

javascript浅析iife的作用

什么是IIFEIIFE就是立即执行函数表达式（Immediately-InvokedFunctionExpression）为什么需要IIFE应用IIFE有两个比较经典的使用场景，第一就是在循环中定时输出数据项，for(vari=0;i<5;i++){setTimeout(function(){console.log(i);},1000);}上面输出的并不... 查看详情

工作中，如何衡量一个人的javascript编码水平？(代码片段)

1、立即执行函数立即执行函数，即ImmediatelyInvokedFunctionExpression(IIFE)，正如它的名字，就是创建函数的同时立即执行。它没有绑定任何事件，也无需等待任何异步操作：(function()//代码)();function()…是一个匿名函数，包围它的一... 查看详情

前端小小白的学习之路javascript中的十个难点，你有必要知道。

1.立即执行函数立即执行函数，即ImmediatelyInvokedFunctionExpression(IIFE)，正如它的名字，就是创建函数的同时立即执行。它没有绑定任何事件，也无需等待任何异步操作：(function(){//代码//...})();function(){…}是一个匿名函数，包围... 查看详情

c_cppc++立即调用函数表达式（iife）(代码片段)

查看详情

let能否完全替代iife

...文章，来解释为什么我们用现在的方式来写立即执行函数表达式。少数的读者批评文章过时了，都在争论在ECMA2015中介绍的块级作用域变量使IIFE变得过时了。恰恰相反，立即执行函数表达式一点也没有过时！因为这个理由，我决... 查看详情

if与立即执行函数（iife）里面的变量提升

今天遇到一道笔试题，题目是这样的f=function(){returntrue;}; g=function(){returnfalse;}; (function(){ if(g()&&[]==![]){ f=functionf(){returnfalse;}; 查看详情

javascript函数声明，函数表达式，匿名函数的区别，深入理解立即执行函数(function(){…})()

functionfnName(){xxxx};//函数声明：使用function关键字声明一个函数，在指定一个函数名。//例如：(正常，因为提升了函数声明，函数调用可以在函数声明之前)fnName();functionfnName(){alert(‘HelloWorld‘);}varfnName=function(){xxxx};//函数表达式：... 查看详情