JS匿名函数自调使用及优点作用详解(IIFE原理 / 一次性函数 / 自调用函数)

最新推荐文章于 2024-05-18 01:22:14 发布
最新推荐文章于 2024-05-18 01:22:14 发布
阅读量1.9k 收藏 4
点赞数 2
分类专栏： + JScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/100707333
版权
+ JScript 专栏收录该内容
125 篇文章 174 订阅 ¥9.90 ¥99.00
订阅专栏
本文详细介绍了JavaScript中的立即执行函数（IIFE），包括其定义、常见写法、使用原因和原理。IIFE能避免作用域污染，解决全局变量冲突，利于代码压缩，并能模仿块级作用域。通过对IIFE的理解，开发者可以更好地管理和组织代码。
摘要由CSDN通过智能技术生成

前言

JS 自执行函数又称为 IIFE，指声明一个匿名函数，然后马上调用，这种函数一般称为一次性函数、自调用函数等。

什么是函数声明与函数表达式：

// 函数声明语句
function demo()
// 函数表达式
var demo = function()

IIFE常见的写法：


                

                
                
        

        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        

    

      

        

            

              
                
                  王佳斌
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          

                

                        订阅专栏
                









                



	

		

			

				
					
JavaScript中匿名函数的用法及优缺点详解

				
			

			

				

					11-25
				

			

		

		

			
				
匿名函数可以有效的保证在页面上写入Javascript，而不会造成全局变量的污染。
这在给一个不是很熟悉的页面增加Javascript时非常有效，也很优美。
一、什么是匿名函数？ 
在Javascript定义一个函数一般有如下三种方式：
函数关键字(function)语句： 

function fnMethodName(x){alert(x);}
函数字面量(Function Literals)： 

var fnMethodName = function(x){alert(x);}
Function()构造函数： 

var fnMethodName = new Function(‘x’,

			
		

	



                

              
                



	

		

			

				
					
JS函数---自调用函数

				
			

			

				

					望望byte的博客
				

				

					08-01
					
					1819
					
				

			

		

		

			
				
文章目录语法：含义：
语法：
//两种常用写法
1. (function(形参列表) {
	return ....
})(实参列表);

2. (function(形参列表) {
	return ....
}(实参列表));

含义：
自调用时一次性函数，声明的同时调用，页面加载完毕，函数也执行完毕

...

			
		

	



                


  
              

                


	

		

			

				
					
调用函数的优势

				
			

			

				

					m0_74016728的博客
				

				

					12-05
					
					501
					
				

			

		

		

			
				
C语言小课堂|第二讲--调用函数的优势

hello，小伙伴。我又来了，我还是云起。最近小云起在学习c语言时出现了一些问题，当我的小程序需要多次使用同一段函数代码时，总是不停的粘贴复制，导致小云起写的代码很乱很难看，呜呜呜！

作为一名未来优秀的程序员绝对不能出现这样的错误，因此我发现了一个特别好用的方法，就是自己定义函数，通过主函数去不断调用它，不仅使得代码更简洁了，还不会出现因为复制出现的变量错误！！！

下面让我们看一个比较大小的小例子

源码双手奉上：

#include <stdio

			
		

	





	

		

			

				
					
匿名函数自我调用_自调用匿名函数

				
			

			

				

					weixin_42097208的博客
				

				

					12-24
					
					916
					
				

			

		

		

			
				
(function( window, undefined ) {var jQuery = ...// ...window.jQuery = window.$ = jQuery;})(window);1)为什么要创建这样一个自调用匿名函数 ?通过创建一个自调用匿名函数，创建了一个特殊的函数作用域，该作用域中的代码不会和已有的同名函数、方法和变量以及第三方库冲突。由于 jQuery 会被应用在成千上万...

			
		

	



		

			
		



	

		

			

				
					
自执行（自调用）函数的理解与用法

				
			

			

				

					onlyoneLIJINGYI的博客
				

				

					09-21
					
					5877
					
				

			

		

		

			
				
自执行（自调用）函数可以创建独立的作用域避免全局污染，以及项目中多个js文件中全局变量或方法命名冲突的问题；
用法：(函数)(实参)，（）中可以传递参数，下面例子是自调用匿名函数，也可以设置函数名；
在其他博客中看到一个例子：
for(var i=0; i<6; i++){
  liList[i].onclick = function(){
    alert(i) // 为什么 alert...

			
		

	





	

		

			

				
					
JS回调函数原理与用法详解【附PHP回调函数】

				
			

			

				

					10-16
				

			

		

		

			
				
在这个例子中，回调函数是一个匿名函数，它在`Buy`函数满足特定条件时被调用。  #### 回调函数与闭包的问题  闭包经常会导致一些问题，比如在事件监听器中，我们通常会用到`addEventListener`方法来添加事件监听。...

			
		

	





	

		

			

				
					
JavaScript函数定义方法实例详解

				
			

			

				

					12-09
				

			

		

		

			
				
本文将深入探讨JavaScript中的函数定义方法，包括函数声明、函数表达式、函数提升、自调用函数以及函数作为值和对象的特性。  首先，我们来看函数声明。函数声明使用`function`关键字，接着是函数名，然后是参数列表...

			
		

	





	

		

			

				
					
JavaScript函数模式详解

				
			

			

				

					10-25
				

			

		

		

			
				
而匿名函数则常用于一次性使用的函数，或者用作回调函数。  2. 函数声明与函数表达式 函数声明和函数表达式是定义函数的两种基本方法。函数声明的特点是，无论声明在何处，都会被提升至其所在作用域的顶部，这就是...

			
		

	





	

		

			

				
					
js自调用匿名函数的三种写法(推荐)

				
			

			

				

					11-25
				

			

		

		

			
				
第一种：

(function(){
   console.log(‘hello world”)
})()

第二种：

(function(){
   console.log(‘hello world')
}())

 第三种：

!function(){
   console.log(‘hello world')
}()

以上这篇js自调用匿名函数的三种写法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

			
		

	





	

		

			

				
					
突然理解了JavaScript自调用函数的用处

				
			

			

				

					fangzhouxing
				

				

					05-12
					
					666
					
				

			

		

		

			
				
JavaScript自调用函数(self-invoking function)的例子，可以参见这里
。
我原来的程序是这样写的，使用了所谓的“单件对象
”(Singleton object)的设计模式：
Divo = function() {
    return {
    init : function() {
      //这里执行所有初始化功能
    }
}()

Divo.init(...

			
		

	





	

		

			

				
					
函数自调用

				
			

			

				

					cjx177187的博客
				

				

					06-23
					
					1913
					
				

			

		

		

			
				
函数自调用就是函数内部运行再次调用函数本身运行，这意味着每一次函数运行都会触发函数再次运行，不用额外的调用函数看个例子吧：我们可以看到fn函数内部有两个语句一个打印666的语句和一个调用fn函数的语句，当外部调用的fn函数的语句运行后，fn函数运行打印666；此时再次运行fn函数的调用，先会在函数内部寻找fn函数，没找到就会去全局中找。所以会再次运行fn函数，再次打印666，再调用fn函数，一直无限循环下去。但是这样一直循环下去就会让浏览器超负荷，这不是我们想看到的，所以怎样解决呢？既要使函数循环运行，但是

			
		

	





	

		

			

				
					
闭包 ，自执行函数有啥作用呢？

				
			

			

				

					youyuliu的博客
				

				

					09-04
					
					1593
					
				

			

		

		

			
				
自执行函数作用：js是函数作用域，防止变量污染； 

闭包作用：函数外可以访问函数内变量；


下面来附上一段项目中代码来说明；


;
dynews.TvEditSystem = (function ($, window, document) {
    var mainGuid = getRequestByName("mainGuid");
    var mainColumnId = "";...

			
		

	





	

		

			

				
					
2020-09-11【学习笔记】scala语言（十七） scala函数作为函数返回值

				
			

			

				

					qihoo233的博客
				

				

					09-11
					
					171
					
				

			

		

		

			
				
scala函数作为函数返回值



scala学习仓库地址：https://gitee.com/qh123/scala_learn


			
		

	





	

		

			

				
					
自调用函数的初步理解（一）

				
			

			

				

					u013746071的专栏
				

				

					06-21
					
					785
					
				

			

		

		

			
				
自调用函数的初步理解步骤：

//函数的自调用，自调用函数，页面加载后，这个自调用函数就执行完了，声明的时候直接调用了，不能再调用了 ，分号一定要加上
//	分步骤理解： 
1) 函数的普通调用方式：
	function f1(){
		console.log("函数");
	}; 
	f1(); //函数调用
	
2)	延伸——可以换种写法：
	(function f1(){
		 console.log("自调用函数222sss2");
	})();
	
3)  延伸——再精简一下，可以去掉方法名：
.

			
		

	





	

		

			

				
					
JavaScript——回调函数 + 函数自调用

				
			

			

				

					z_2532040197的博客
				

				

					05-25
					
					1224
					
				

			

		

		

			
				
1.回调函数：其实就是将一个函数作为参数传递到另一个函数中,当另一个函数执行后，再执行当作参数传入的那个函数，被当作参数的那个函数就是回调函数。


            function fn(a,b,fm) {
				var sum = a+b
				return fm(sum)
			}
			function fm(n) {
				var pow = n*n
				console.log(pow)
			}
			fn(2,3,fm)




分析：先是fn(2,3,fm)调用fn函数，传

			
		

	





	

		

			

				
					
JavaScript匿名函数（自调用函数）

				
			

			

				

					叮当的猫猫的博客
				

				

					03-01
					
					4074
					
				

			

		

		

			
				
首先看一下普通函数和匿名函数的区别
//普通函数
function sum(a,b){
	return a+b;
	console.log("我是一个普通函数")
	}

//匿名函数，不能单独使用
function (a,b){
	return a+b;
	console.log("我是一个匿名函数")
	}

没错，匿名函数简单来说就是普通函数去掉名字，但是他不能单独定义与使用，下面是匿名函数的一些使用场景：
用于函数表达式、作为返回值、用于定义对象方法、作为回调函数、用于立即执行函数、用于DOM元素注

			
		

	





	

		

			

				
					
JS语法 ：普通函数、匿名函数、自调用函数、箭头函数

					
最新发布

				
			

			

				

					qq_41861406的博客
				

				

					05-18
					
					460
					
				

			

		

		

			
				
箭头函数箭头一定是匿名函数，需要注意的是不创建自己的 this，从定义时的上下文中继承 this（在哪创建指向哪里）。自调用函数可以是匿名函数也可以是非匿名函数，不过一般是匿名函数。箭头函数是 ES6 引入的简写匿名函数，语法更简洁，特别适合短小的函数。定义后立即执行的函数，一般是匿名函数，用于创建一个独立的作用域，避免污染全局作用域。普通函数是最常见的函数定义方式，有一个明确的函数名，可以在代码中多次调用。匿名函数是没有名称的函数，通常用于一次性调用或作为参数传递给其他函数。使用 filter 方法。

			
		

	





	

		

			

				
					
JavaScript立即执行函数详解：私有变量与自调用

				
			

			

				

					
				

			

		

		

			
				
在深入解析JavaScript中的立即...总结来说，立即执行函数在JavaScript中提供了一种创建封闭作用域、创建私有变量和一次性执行函数逻辑的便捷方式。同时，理解函数声明和函数表达式的区别对于正确处理代码调用至关重要。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
王佳斌

			
请作者喝杯咖啡 :)

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值