JavaScrip中的立即执行函数

红太狼 2022-12-31 13:18 107阅读 0赞

**JavaScrip 中 ：立即执行函数 IIFE：immediately-invoked function expression**

特点：自动执行、执行完之后销毁

## 1、立即执行函数基本语法： ##

***以 ( ) \[ \] 开头的语句，前⾯的语句必须加分号，否则会解析错误***

//第一种写法 两个括号 ()()
    (function(){  
       ...
    })();
    //第二种写法 一个括号 ()
    (function(){  
        ...
    }());
    
    //错误示例：
    function(){  
        ...
    }()

样例：

(function () { 
        console.log('test')
    })();
    
    (function test2(params) { 
        console.log('test2') 
     }());

括号执行的是表达式  
函数声明变成表达式的方法如下  
（这样就可以直接执行了）

!function(){ }();
    +function(){ }();
    -function(){ }();
    ~function(){ }();
    new function(){ }
    new function(){ }() // 只有传递参数时，才需要最后那个圆括号

## 2、立即执行函数的作用： ##

创建一个独立的作用域。这个作用域里面的变量，外面访问不到（即避免了 变量污染 ）

一道面试题

var ul = document.getElementById('list')
     var liList=ul.getElementsByTagName('li')
    for(var i=0; i<4; i++){ 
      liList[i].onclick = function(){ 
        alert(i) // 为什么 alert 出来的总是4，而不是 0、1、2、3
      }
    }

原因：因为输出的 i 是全局作用域的，当循环结束后 i 的值是 4，所以输出的 i 就是4。

使用立即执行函数来解决这个问题：

var ul = document.getElementById('list')
    var liList=ul.getElementsByTagName('li')
    for(var i=0; i<4; i++){ 
        (function (j) { 
            liList[j].onclick=function () { 
                alert(j)
            }
        })(i)
    }

JS 中调用函数传递参数都是值传递 ，所以立即执行函数执行时，首先会把 i 复制一份，然后再创建作用于来执行函数。

发表评论取消回复

表情：

评论列表（有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScrip中的函数

函数 1.1语法函数就是包裹在花括号中的代码块，使用关键字function定义: function myFn(){ //这里是要执行的代

偏执的太偏执、/ 2023年01月13日 14:52/ 0 赞/ 123 阅读

相关 JavaScrip中的立即执行函数

JavaScrip 中：立即执行函数 IIFE：immediately-invoked function expression 特点：自动执行、执行完之后销毁 1、立即

红太狼/ 2022年12月31日 13:18/ 0 赞/ 108 阅读

相关 js中的立即执行函数

立即执行函数：函数定义完成后立即被调用，这种函数叫做立即执行函数。像下面，我们来看看： <!DOCTYPE html> <html lang="z

雨点打透心脏的1/2处/ 2022年10月29日 09:03/ 0 赞/ 181 阅读

相关 JavaScript：立即执行函数

前言：什么是立即执行函数？JS立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行，这种模式本质上就是函数表达式（命名的或者匿名的），在创建后立即执行。立即

痛定思痛。/ 2022年10月17日 14:57/ 0 赞/ 157 阅读

相关立即执行函数

定义：此类函数没有声明，在一次执行过后即释放。适合做初始化工作。 1.(function ()\{\}()) 2.(function ()\{\})() 3.只有表

素颜马尾好姑娘i/ 2022年06月04日 04:05/ 0 赞/ 178 阅读

相关 js 立即执行函数

for(var i=0;i<5;i++){ (function(i){ setTimeout(function(){ c

曾经终败给现在/ 2022年05月30日 08:24/ 0 赞/ 173 阅读

相关 JavaScript中的立即执行函数

立即执行函数 Immediately-Invoked Function Expression，IIFE 只记录IIFE的写法和作用，具体内容可参考： > https:

偏执的太偏执、/ 2022年05月24日 04:24/ 0 赞/ 180 阅读

相关立即执行函数

立即执行函数（执行完之后立即销毁）针对初始化功能的函数 var num = (function(a, b, c)\{ return a\b+c; \}(1, 2, 3

淡淡的烟草味﹌/ 2022年05月15日 16:34/ 0 赞/ 183 阅读

相关立即执行函数的使用

在引入MVC模块化概念后，会将JS代码分为多个JS文件保存但这个时候就需要去避免使用局部变量，所以需要使用到了立即执行函数将JS代码包起来。使用方法及步骤： 1、不

川长思鸟来/ 2022年02月17日 01:46/ 0 赞/ 170 阅读

相关立即执行函数

一、前言我们知道在原生JavaScript中只有全局作用域和函数作用域，公有变量很容易造成污染。为了解决这个问题，必须要对作用域进行隔离，这个时候就想到了立即执行函

╰+哭是因爲堅強的太久メ/ 2022年01月12日 05:49/ 0 赞/ 209 阅读