精华内容
下载资源
问答
  • 立即执行函数
    千次阅读
    2022-04-08 21:52:00

    1.立即执行函数:不需要调用,立马能够自己执行的函数

    2.写法  也可以传递参数进来
    (function 函数名() {})() 或 (function 函数名(){}());  函数名也可不写

    3.立即执行函数最大的作用就是 独立创建了一个作用域,里面所有的变量都是局部变量 不存在命名冲突的情况  可以起名 也可以不起名

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    		//1.立即执行函数:不需要调用,立马能够自己执行的函数
    			function fn() {
    				console.log(1);
    			}
    			fn();
    			//2.写法  也可以传递参数进来
    			//(function() {})() 或 (function(){}());
    			(function sum1(a,b) {
    				console.log(a + b);
    			})(1,2); //第二个小括号可以看做是调用函数   如果存在多个立即执行函数 就得用分好给他们分开  否则会报错
    			(function sum(a,b) {
    				console.log(a + b);
    			}(2,3));
    			
    			//3.立即执行函数最大的作用就是 独立创建了一个作用域,里面所有的变量都是局部变量 不存在命名冲突的情况  可以起名 也可以不起名
    			
    		</script>
    	</body>
    </html>
    

    更多相关内容
  • js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行。 ( function(){…} )()和...
  • 1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: Unexpected token 2.在函数体后面加括号就能立即调用,...
  • JavaScript立即执行函数的三种不同写法立即执行函数的三种不同写法第一种:(function () { // open IIFE// inside IIFE}()); // close IIFE第二种:!function () { // open IIFE// inside IIFE}(); // close IIFE第...
  • js立即执行函数

    千次阅读 2021-08-06 16:21:54
    一:什么是立即执行函数? 声明一个函数,并马上调用这个匿名函数就叫做立即执行函数;也可以说立即执行函数是一种语法,让你的函数在定义以后立即执行; 立即执行函数的创建步骤,看下图: 二:立即执行函数的写法...

    一:什么是立即执行函数?

    声明一个函数,并马上调用这个匿名函数就叫做立即执行函数;也可以说立即执行函数是一种语法,让你的函数在定义以后立即执行;

    立即执行函数的创建步骤,看下图:
    在这里插入图片描述

    二:立即执行函数的写法:

    有时,我们定义函数之后,立即调用该函数,这时不能在函数的定义后面直接加圆括号,这会产生语法错误。产生语法错误的原因是,function 这个关键字,既可以当做语句,也可以当做表达式,比如下边:

    //语句
    function fn() {};
    
    //表达式
    var fn = function (){};
    

    为了避免解析上的歧义,JS引擎规定,如果function出现在行首,一律解析成语句。因此JS引擎看到行首是function关键字以后,认为这一段都是函数定义,不应该以原括号结尾,所以就报错了。
    解决方法就是不要让function出现在行首,让JS引擎将其理解为一个表达式,最简单的处理就是将其放在一个圆括号里,比如下边:

    (function(){
    //code
    }())
    
    (function (){
    //code
    })()
    

    上边的两种写法,都是以圆括号开头,引擎会意味后面跟的是表达式,而不是一个函数定义语句,所以就避免了错误,这就叫做"立即调用的函数表达式"。
    立即执行函数,还有一些其他的写法(加一些小东西,不让解析成语句就可以),比如下边:

    (function () {alert("我是匿名函数")}())   //用括号把整个表达式包起来
    (function () {alert("我是匿名函数")})()  //用括号把函数包起来
    !function () {alert("我是匿名函数")}()  //求反,我们不在意值是多少,只想通过语法检查
    +function () {alert("我是匿名函数")}() 
    -function () {alert("我是匿名函数")}() 
    ~function () {alert("我是匿名函数")}() 
    void function () {alert("我是匿名函数")}() 
    new function () {alert("我是匿名函数")}() 
    

    三:立即执行函数的作用:

    不必为函数命名,避免了污染全局变量
    立即执行函数内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量
    封装变量
    总而言之:立即执行函数会形成一个单独的作用域,我们可以封装一些临时变量或者局部变量,避免污染全局变量
    四:与立即执行函数相关的面试题:

    <body>
        <ul id="list">
            <li>公司简介</li>
            <li>联系我们</li>
            <li>营销网络</li>
        </ul>
        <script>
           var list = document.getElementById("list");
          var li = list.children;
          for(var i = 0 ;i<li.length;i++){
            li[i].onclick=function(){
              alert(i);  // 结果总是3.而不是0,1,2
            }
          }
         </script>  
    </body>
    

    为什么alert总是3? 因为i是贯穿整个作用域的,而不是给每一个li分配一个i,点击事件使异步,用户一定是在for运行完了以后,才点击,此时i已经变成3了。
    那么怎么解决这个问题呢,可以用立即执行函数,给每个li创建一个独立的作用域,在立即执行函数执行的时候,i的值从0到2,对应三个立即执行函数,这3个立即执行函数里边的j分别是0,1,2所以就能正常输出了,看下边例子:

    <body>
        <ul id="list">
            <li>公司简介</li>
            <li>联系我们</li>
            <li>营销网络</li>
        </ul>
        <script>
           var list = document.getElementById("list");
          var li = list.children;
          for(var i = 0 ;i<li.length;i++){
           ( function(j){
                li[j].onclick = function(){
                  alert(j);
              })(i); 把实参i赋值给形参j
            }
          }
         </script>  
    </body>
    

    也可以使用ES6的块级作用域解决整个问题

    <body>
        <ul id="list">
            <li>公司简介</li>
            <li>联系我们</li>
            <li>营销网络</li>
        </ul>
        <script>
           var list = document.getElementById("list");
          var li = list.children;
          for(let i = 0 ;i<li.length;i++){
            li[i].onclick=function(){
              alert(i);  // 结果是0,1,2
            }
          }
         </script>  
    </body>
    

    五、立即执行函数使用的场景

    1、你的代码在页面加载完成之后,不得不执行一些设置工作,比如时间处理器,创建对象等等。
    2、所有的这些工作只需要执行一次,比如只需要显示一个时间。
    3、但是这些代码也需要一些临时的变量,但是初始化过程结束之后,就再也不会被用到,如果将这些变量作为全局变量,不是一个好的注意,我们可以用立即执行函数——去将我们所有的代码包裹在它的局部作用域中,不会让任何变量泄露成全局变量,看如下代码:
    在这里插入图片描述
    比如上面的代码,如果没有被包裹在立即执行函数中,那么临时变量todaydom,days,today,year,month,date,day,msg都将成为全局变量(初始化代码遗留的产物)。用立即执行函数之后,这些变量都不会在全局变量中存在,以后也不会其他地方使用,有效的避免了污染全局变量。

    六、立即执行函数的参数

    (function(j,形参){
    //代码中可以使用j
    })(实参)
    

    如果立即执行函数中需要全局变量,全局变量会被作为一个参数传递给立即执行函数(上例中的i就是一个全局变量,i代表的是实参,j是i在立即执行函数中的形参)。

    七、立即执行函数的返回值

    像其他函数一样,立即执行函数也可以有返回值。除了可以返回基本类型值以外,立即执行函数也能返回任何类型的值,比如对象,函数。
    在这里插入图片描述
    上例中立即执行函数的返回值被赋值给了一个变量result,这个函数简单的返回了res的值,这个值事先被计算并被存储在立即执行行数的闭包中。
    在五中,如果在以后的代码中我需要msg这个值,我也可以返回一个包含msg的对象,方便在以后代码中使用(这样五中的一些临时变量也没有暴露在外面)。

    八、总结立即执行函数有哪些作用?

    1、改变变量的作用域(创建一个独立的作用域)

    <body>
        <ul id="list">
            <li>公司简介</li>
            <li>联系我们</li>
            <li>营销网络</li>
        </ul>
        <script>
           var list = document.getElementById("list");
          var li = list.children;
          for(var i = 0 ;i<li.length;i++){
           ( function(j){
                li[j].onclick = function(){
                  alert(j);
              })(i); 把实参i赋值给形参j
            }
          }
         </script>  
    </body>
    

    改变变量i的作用域,把全局变量i以参数的形式传递到立即执行函数中,在立即执行函数中定义变量i的形参变量j,变量j就是在立即执行函数的作用域中。(给每个li创建了一个作用域块,点击的时候寻找自由变量j,在立即执行块中找到)
    2、封装临时变量
    image.png
    在上面的代码中,可以封装临时变量,避免全局变量的污染。也可以返回一个在全局中需要的变量(用return)。


    作者:泡杯感冒灵
    转载链接:https://www.jianshu.com/p/b10b6e93ddec

    展开全文
  • ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因...
  • 立即执行函数模式在JavaScript中可以让你的函数在定义后立即被执行,下面我们就来深入解析JavaScript中的立即执行函数,需要的朋友可以参考下
  • 在Javascript中,任何function在执行的时候都会创建一个执行上下文,因为为function声明的变量和function有可能只在该function内部,这个上下文,在调用function的时候,提供了一种简单的方式来创建自由变量或私有子...
  • 闭包和立即执行函数一、闭包二、闭包的作用三、闭包形式四、立即执行函数五、使用环境六、小练习 一、闭包 当a函数已经执行完了,b函数才开始。 原创文章 10获赞 3访问量 453 关注 私信 展开阅读全文 作者:...
  • JS中的立即执行函数

    千次阅读 2022-01-08 19:59:23
    JS 立即执行函数可以让函数在创建后立即执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行。 1、立即执行函数的写法 立即执行函数通常有下面两种写法: //第一种写法 (function(){...

    JS 立即执行函数可以让函数在创建后立即执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行。

    1、立即执行函数的写法

    立即执行函数通常有下面两种写法:

     
    
    1. //第一种写法
    2. (function(){
    3. ...
    4. })();
    5. //第二种写法
    6. (function(){
    7. ...
    8. }());
    9. //错误的写法
    10. function (){
    11. ...
    12. }();    //报错: Uncaught SyntaxError: Unexpected token (

    第三种写法报错的原因是,Javascript引擎看到function关键字之后,认为后面跟的是函数定义语句,而在一条语句后面加上() 会被当做分组操作符,分组操作符里必须要有表达式,所以这里报错,不应该以圆括号结尾。以圆括号开头,引擎就会认为后面跟的是一个表示式,而不是函数定义,所以就避免了错误。

    让Javascript引擎认为这是一个表达式的方法还有很多:

     
    
    1. !function(){}();
    2. +function(){}();
    3. -function(){}();
    4. ~function(){}();
    5. new function(){ /* code */ }
    6. new function(){ /* code */ }() // 只有传递参数时,才需要最后那个圆括号

    2、立即执行函数的作用

    立即执行函数只有一个作用:创建一个独立的作用域。这个作用域里面的变量,外面访问不到(即避免了「变量污染」)。

    面试题:

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

    因为输出的 i 是全局作用域的,当循环结束后 i 的值是 6,所以输出的 i 就是6。

    用立即执行函数可以解决这个问题。

     
    
    1. var liList = ul.getElementsByTagName('li')
    2. for(var i=0; i<6; i++){
    3. (function(j){
    4. liList[j].onclick = function(){
    5. alert(j) // 0、1、2、3、4、5
    6. }
    7. })(i)
    8. }

     因为 JS 中调用函数传递参数都是值传递 ,所以当立即执行函数执行时,首先会把参数 i 的值复制一份,然后再创建函数作用域来执行函数,循环5次就会创建5个作用域,所以每个 li 元素访问的都是不同作用域的 i 的值 。

    3、立即执行函数和闭包的区别

    下面的setTimeout 将依次输出 5 0 1 2 3 4 

     
    
    1. for (var i = 0; i < 5; i++) {
    2. (function (i) {
    3. setTimeout(function () {
    4. console.log(i);
    5. }, 1000);
    6. })(i);
    7. }
    8. console.log(i);

    因为for循环以后 i 就会变成 5,上面代码最后一行的输出将先执行,所以先输出 5。JS中调用函数传递参数都是值传递 ,所以当立即执行函数执行时,首先会把参数 i 的值复制一份,然后再创建函数作用域来执行函数,循环5次就会创建5个作用域,所以1秒后几乎会同时输出 0 1 2 3 4 。

    上面的现象也可以说是闭包,因为在外层的 function 里面还包含着 setTimeout 里面的 function 函数,而里面的 function 函数就访问了外层 function 的 i 的值,由此就形成了一个闭包。每次循环时,将 i 的值保存在一个闭包中,当 setTimeout 中定义的操作执行时,就会访问对应闭包保存的 i 值,所以输出 0 1 2 3 4。

    立即执行函数和闭包没有什么关系,只是两者会经常结合在一起使用而已,但两者有本质的不同。

    立即执行函数和闭包只是有一个共同优点就是能减少全局变量的使用。

    立即执行函数只是函数的一种调用方式,只是声明完之后立即执行,这类函数一般都只是调用一次,调用完之后会立即销毁,不会占用内存。

    闭包则主要是让外部函数可以访问内部函数的作用域,也减少了全局变量的使用,保证了内部变量的安全,但因被引用的内部变量不能被销毁,增大了内存消耗,使用不当易造成内存泄露。

    展开全文
  • JavaScript 之 立即执行函数

    千次阅读 2021-11-16 15:07:33
    ​ 声明一个函数,并立即调用这个函数,此时这个函数就是立即执行函数,简单来说就是定义函数之后立即执行该函数。立即执行函数一般也写成匿名函数的形式,匿名函数写法为 function(){},就是使用function关键字...

    1、定义

    ​ 声明一个函数,并立即调用这个函数,此时这个函数就是立即执行函数,简单来说就是定义函数之后立即执行该函数。立即执行函数一般也写成匿名函数的形式,匿名函数写法为 function(){},就是使用function关键字声明一个函数,但是未命名的函数。关于匿名函数有一点要注意的是:匿名函数不能单独使用,否则会报错,至少需要用 () 包裹起来。

    2、作用

    ​ ① 不需要为函数命名,避免污染全局变量。

    ​ ② 创建一个独立作用域,这个作用域里面的变量,外部访问不到,避免变量污染。

    ​ ③ 闭包和私有数据

    3、使用场景

    ​ ① 在页面加载完成后,需要立即执行的一些初始化设置,例如时间处理,创建对象等。

    ​ ② 一些只需要执行一次的代码,代码中的某些变量在执行结束后,再也不会被用到,我们就不适合用全局变量,可能会变量污染,此时更适合用立即执行函数。

    4、语法

    // 立即执行函数的两种写法
    
    // 第一种:用括号把整个函数定义和括号调用包裹起来
    (function(){
     // 函数体
    }())
    
    // 第二种:用括号把函数定义包裹起来,后面再加括号调用
    (function (){
     // 函数体
    })()
    
    // 注意:之所以要用圆括号包裹,是因为在浏览器的JS引擎规定,如果function出现在行首,一律解析成语句,
    // 而此时我们希望JS引擎将其理解为一个表达式,圆括号的包裹就是起这个作用的。
    

    5、常见写法

    // 普通函数形式
    function foo(){console.log("Hello World!")}()//声明函数后加()会报错
    (function foo(){console.log("Hello World!")}())//用括号把整个表达式包起来,正常执行
    (function foo(){console.log("Hello World!")})()//用括号把函数包起来,正常执行
    !function foo(){console.log("Hello World!")}()//使用!,求反,这里只想通过语法检查。
    +function foo(){console.log("Hello World!")}()//使用+,正常执行,这里只想通过语法检查。
    -function foo(){console.log("Hello World!")}()//使用-,正常执行,这里只想通过语法检查。
    ~function foo(){console.log("Hello World!")}()//使用~,正常执行,这里只想通过语法检查。
    void function foo(){console.log("Hello World!")}()//使用void,正常执行,这里只想通过语法检查。
    new function foo(){console.log("Hello World!")}()//使用new,正常执行,这里只想通过语法检查。
    
    // 匿名函数形式
    (function(){console.log("我是匿名函数。")}())
    (function(){console.log("我是匿名函数。")})()
    !function(){console.log("我是匿名函数。")}()
    +function(){console.log("我是匿名函数。")}()
    -function(){console.log("我是匿名函数。")}()
    ~function(){console.log("我是匿名函数。")}()
    void function(){console.log("我是匿名函数。")}()
    new function(){console.log("我是匿名函数。")}()
    

    6、参数传递

    // 如果立即执行函数中需要用到外部变量,我们可以通过参数传递的方式,在函数内部使用
    // 形参就是传递进来的外部变量,进入立即执行函数独立的作用域,不再受外部变量的影响
    
    (function(j){
        // 使用外部变量
    	console.log(j)
    })(i)
    

    7、返回值

    // 跟其他函数一样,可以返回任何类型的值
    // 可通过返回值实现闭包
    
    var result = (function(){
        var num = 666;
        reutrn function() {
            return num;
        }
    })()
    // 由于返回值是一个函数 所以通过 () 进行调用
    console.log(result())
    

    8、常见面试题

    // 1.普通流程
    for(var i=0;i<3;i++) {
        setTimeout(function() {
            console.log(i)
        },300)// 输出结果为 3 3 3
    }
    
    // 2.立即执行函数
    for(var i=0;i<3;i++) {
    	(function (j){
    		setTimeout(function (){
    			console.log(j)
    		},300) // 输出结果为 0 1 2
    	})(i)
    }
    
    // 3.let 块级作用域
    for(let i=0;i<3;i++) {
        setTimeout(function() {
            console.log(i)
        },300)// 输出结果为 0 1 2
    }
    

    ​ 第一段代码中 setTimeout 定时器属于异步操作,它是在 for 循环执行完之后,才执行的,因为 i 是var 声明的,作用域贯穿于整个函数作用域,所以当执行setTimeout时,i 已经通过for循环变成了 3 ,所以输出结果为:3 3 3。

    ​ 第二段代码中使用了立即执行函数,使每次for循环都创建了一个独立作用域,并把每次循环 i 的值,传递进独立作用域,不受外界影响,所以输出结果为 :0 1 2。

    ​ 第三段代码中使用了 ES6 的 let ,使每次for循环都创建了一个块级作用域,不同作用域之间不影响,所以输出结果为: 0 1 2。

    展开全文
  • 【前端 教程】详解 立即执行函数

    千次阅读 多人点赞 2020-05-09 18:33:30
    【前端 教程】立即执行函数 详解 1、定义 立即执行函数:声明一个函数,并马上调用这个匿名函数就叫做立即执行函数;即立即执行函数是定义函数以后立即执行该函数。 2、立即函数的写法 在理解立即函数写法之前 需要...
  • JavaScript基础之立即执行函数

    千次阅读 2021-11-09 17:26:09
    这种函数只要浏览器加载的时候会自动运行,而需要调用,前面在闭包的时候也说过这种函数,一般将其称之为:立即执行函数立即函数的特征: 会自动执行 只会执行一次 立即执行函数格式 立即执行函数一般有格式...
  • 立即执行函数 闭包

    2020-10-25 13:31:22
    以下为自己理解,有误请大家指正 闭包:自己的变量不想暴露给外部使用 立即执行函数:不用调用直接执行,是一个函数 立即执行函数与闭包没有什么实质的关系,但是两者可以结合使用
  • jQuery的立即执行函数

    千次阅读 2020-04-29 11:40:44
    (function(){…} )() (function (){…} ()) (function (a, b) { alert(a + b); })(1, 2) (function (a, b) { alert(a + b); }(1, 2))
  • jQuery立即执行函数

    千次阅读 2019-01-18 14:55:37
    jQuery的立即执行函数如下,其常用于第三方库,好处在于隔离作用域,任何一个第三方库都会存在大量的变量和函数,为了避免变量污染(命名冲突),开发者们想到的解决办法就是使用立即执行函数立即执行函数的两种...
  • 本文实例讲述了JS立即执行函数功能与用法。分享给大家供大家参考,具体如下: 相信大家经常会遇到下面这两种写法: (function(){ ... })() 和 (function(){ ... }()) 关于这样写是什么意思呢?有什么区别呢? 在...
  • Js立即执行函数

    千次阅读 2018-08-21 14:52:31
    Javascript和其他编程语言相比比较随意,所以Javascript代码中充满各种奇葩的...其中( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法。 概念理解:函数声明、函数表达式、匿...
  • 闭包,立即执行函数(IIFE),this指向

    千次阅读 2018-04-17 14:20:59
    立即执行函数-&gt;for in例子如果每次输出不同的值( 闭包,定时器第二个变量,promise/let)-&gt;在jquery中的使用由于javascript中特有的作用域,函数中的局部变量不能够被外部获得或使用,而函数内部可以...
  • 立即执行函数是什么 立即执行函数有什么用途   ------------------------------------------- 回答: 1. 立即执行函数是什么 立即执行函数就是 声明一个匿名函数 马上调用这个匿名函数     上面是一个...
  • 立即执行函数 / 自执行函数 在封装函数的同时 就 立即执行函数 语法: ( 匿名函数程序 )(); !匿名函数程序(); ~匿名函数程序(); (function (){console.log(111)})(); !function (){console.log(222)}(); ~...
  • 立即执行函数.html

    2021-06-22 23:35:57
    立即执行函数,可做框架(function(w,d){var readyRE=/loaded|complete|interactive/;//检测网页是否加载完成的与正则表达式// var $=function(obj){// return selector(obj);// }//检测选择器是ID,还是CLASS,还是...
  • JavaScript中立即调用函数表达式(IIFE)是一个在定义时就会立即执行的 JavaScript 函数。 关于 IIFE (Immediately Invoked Function Expression 立即调用函数表达式)可见IIFE(立即调用函数表达式) - 术语表 | ...
  • 所以这里就会提到我们的立即执行函数,所谓立即执行函数,就是不需要调用,立马就能执行的函数。 立即执行函数有两种最常见的写法: (function(){})() (function(){}()) 举个例子: (function fn(){
  • 立即执行函数 只有JS有的 1.问题 以前只有var的时候,想要声明局部变量只能调用一个函数 缺点:为了声明局部变量a而声明了一个全局函数fn 2.解决办法 不给函数取名字,一个匿名函数,然后在声明后面直接加(),直接...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 568,516
精华内容 227,406
关键字:

立即执行函数