JavaScrip中的立即执行函数

红太狼 2022-12-31 13:18 173阅读 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 条评论，173人围观）

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

相关阅读

相关 js中的立即执行函数

好处：里面所有的变量都是局部变量不会有命名冲突的情况 <script> // 1.立即执行函数: 不需要调用，立马能够自己执行的函数

素颜马尾好姑娘i/ 2023年06月25日 06:04/ 0 赞/ 28 阅读

相关立即执行函数

在Es6的let const出现之前，var来声明变量，在程序中很可能会造成全局变量的混乱，这个时候立即执行函数就出现了一：什么是立即执行函数？声明一个函数，并马上调

叁歲伎倆/ 2023年05月31日 07:27/ 0 赞/ 36 阅读

相关 JavaScrip中的函数

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

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

相关 JavaScrip中的立即执行函数

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

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

相关 js中的立即执行函数

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

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

相关立即执行函数

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

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

相关 JavaScript中的立即执行函数

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

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

相关立即执行函数

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

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

相关立即执行函数的使用

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

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

相关立即执行函数

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

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