自执行匿名函数剖析

转载 2015年11月18日 15:57:31

引入

在很多js代码中我们常常会看见这样一种写法:

(function( window, undefined ) {
    // code
})(window);

这种写法我们称之为自执行匿名函数(self-executing anonymous function)。

正如它的名字一样,它是自己执行自己的,前一个括号是一个匿名函数,后一个括号代表立即执行。

 

 


 

函数和函数表达式的区别

  • 语法
复制代码
function keqing(){   //函数
    alert('Hi~');  
}

var keqing = function(){  //函数表达式
  alert('Hi~')
}
复制代码
  • 函数的函数声明有一个重要特征 —— 函数声明提升 
复制代码
keqing();   //Hi~
function keqing(){   
  alert('Hi~');
}

函数:在读取执行代码之前会先读取函数声明
复制代码

 

复制代码
keqing();  // Uncaught TypeError: keqing is not a function
var keqing = function(){
  alert('Hi~');
}

函数表达式:没有函数声明提升,在执行前必须先赋值
复制代码
  • 回到我们的自执行匿名函数
复制代码
function(){
   alert('aaaa');  
}()  //出错,因为这是一个匿名函数,函数后不能跟圆括号


---------------> 函数声明想要变成函数表达式,就需要给它加一个圆括号

(function(){
  alert('aaaa');
})() // aaaa  这样就变成了自执行匿名函数

复制代码

 

 


 

自执行匿名函数剖析

回到我们最开始的栗子,

(function( window, undefined ) {
    // code
})(window);

 

1.自执行匿名函数写法的好处:防止变量名冲突

2.自执行匿名函数的其他多种写法:

复制代码
( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

var f = function() {}();

//当然不需要都记住,会用就OK。还有很多不常见的我就不一一举例了..
复制代码

3.为何要传入window?

这样传入window可将其从全局变量变为局部变量,在函数作用域内可以直接访问到window,就不用将作用域链退回到顶层作用域了。

在压缩代码时,可以对window进行优化。

4.为何要增加参数undefined?

由于undefined在一些情况下有可能会被重写,为确保在自执行匿名函数里的undefined是"真的undefined",就需要增加参数undefined。

 


 

 

因为这个经常在工作和面试中出现,所以我就结合《js高级程序设计》小小滴总结了一下,感觉印象更深刻,了解更透彻了,希望对大家能有所帮助!

 

立志写能让自己看懂,也能让别人看懂的技术博客

自我执行的匿名函数是如何工作的

在理解自我执行函数之前我们先理解一下函数声明函数,函数表达式,匿名函数他们之间的区别 运用function  fname(){.......}    //使用function关键字,然后指定...
  • MacGuffinBox
  • MacGuffinBox
  • 2016年12月22日 08:49
  • 417

js中的匿名函数和匿名自执行函数

js中匿名函数和匿名自执行函数以及常见的使用场景
  • yaojxing
  • yaojxing
  • 2017年05月27日 21:56
  • 1436

杂七杂八JS :深入理解 函数、匿名函数、自执行函数

基础概念定义函数的方式   一般定义函数有两种方式:     1:函数的声明     2:函数表达式   函数的声明      关于函数声明,它最重要的一个特征就是函数声明提升,意思是执行代码之前先...
  • xixiruyiruyi
  • xixiruyiruyi
  • 2017年02月23日 08:48
  • 4114

Javascript的匿名函数与自执行

摘要 函数 是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途。匿名函数:就是没有函数名的函数。 函数的定义,大致可分为三种方式: 第一种:这也是最常规的一种 function d...
  • z69183787
  • z69183787
  • 2014年01月26日 20:40
  • 1754

自执行匿名函数剖析整理

格式:       (function(){           //代码         })(); 解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function...
  • yusirxiaer
  • yusirxiaer
  • 2017年07月18日 11:59
  • 74

匿名自执行函数是闭包吗?

匿名函数与闭包函数应该是不一样的,我看到网上很多人把匿名自执行函数当做闭包,我认为这是不对的, 闭包定义: 闭包是在一个函数中可以访问另外一个函数的作用域   闭包:    function  fun...
  • vuturn
  • vuturn
  • 2015年01月23日 17:19
  • 1987

jQuery源码解析之自调用匿名函数

(function( window, undefined ) { // 构造jQuery 对象 var jQuery = (function() { var jQuery = function(...
  • ElephantBoy
  • ElephantBoy
  • 2016年10月17日 17:09
  • 1180

jQuery深入之源码解析(二)——自调用匿名函数

jQuery自调用匿名函数,即jQuery的所有代码都被包裹在一个立即执行的匿名函数表达式中,这种结构叫做“自调用匿名函数”。当浏览器加载完jQuery文件后,自调用匿名函数就会开始执行,**初始化*...
  • sinat_25127047
  • sinat_25127047
  • 2016年06月03日 16:00
  • 1868

jquery源码学习笔记:自执行匿名函数剖析

(function( window, undefined ) { // code })(window);1.自执行匿名函数写法的好处:防止变量名冲突 2.自执行匿名函数的其他多种写法: ~...
  • weixin_36401046
  • weixin_36401046
  • 2016年12月21日 22:24
  • 291

JS 定义并立即执行匿名函数的方法总结

/*最流行的写法*/    (function(){          alert("run!")     })();         /* !号可以有1~正无穷个,所以这一种就可以衍生无数种方式 *...
  • L1207
  • L1207
  • 2014年12月24日 15:18
  • 2974
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自执行匿名函数剖析
举报原因:
原因补充:

(最多只允许输入30个字)