自执行匿名函数剖析

转载 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高级程序设计》小小滴总结了一下,感觉印象更深刻,了解更透彻了,希望对大家能有所帮助!

 

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

相关文章推荐

javascript自执行匿名函数

格式:      (function(){          //代码        })();解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function(){})的第一...

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

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

C++11中的匿名函数(lambda函数,lambda表达式)

这篇文章是根据维基百科整理来的,原文请看:http://en.wikipedia.org/wiki/Anonymous_function#C.2B.2B  C++11提供了对匿名函数的支持,称为Lam...
  • Augusdi
  • Augusdi
  • 2013年09月17日 15:33
  • 20630

函数声明、函数表达式、匿名函数、立即执行函数的区别

函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明。 函数表达式:var fnName = function () {…};使...

自执行匿名函数剖析整理

格式:       (function(){           //代码         })(); 解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function...

Qt:让任意线程执行一个匿名函数

本类主要功能是在当前线程(比如说主线程),让任意一个线程(比如说某个工作线程)去执行一个匿名函数。 也可以理解为投放一个回调到任意线程去执行。 我觉得用“投放”这个词形容比较合适。 两个主要...

Javascript的匿名函数与自执行

函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途。匿名函数:就是没有函数名的函数。...

JS匿名函数如何反复调用自身实践: 动态加载指定JS列表后执行方法.

,我们经常会使用JS写匿名函数,但我前段时间突然遇到一个问题。 我想写一个匿名函数,但是还想反复调用这个匿名函数。 但是我真心不想污染全局环境(好吧,是做某些不可告人的事,怕被检测到…)JS的方法...

JavaScript 匿名函数几种执行方式

参考1、 javascript自执行匿名函数  http://blog.csdn.net/jbgtwang/article/details/6608265 其中说到了 self-executin...

Javascript自执行匿名函数(function() { })()的原理浅析

Javascript自执行匿名函数(function() { })()的原理浅析
  • S257111
  • S257111
  • 2016年12月01日 17:10
  • 206
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自执行匿名函数剖析
举报原因:
原因补充:

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