自执行匿名函数剖析

引入

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

时间: 2024-08-07 00:09:39

自执行匿名函数剖析的相关文章

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

匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数 下面是一个最常见的自执行函数: 1 // 传统匿名函数 2 (function() { 3 alert('hello'); 4 })(); 这段代码的执行效果就是在页面再载入时弹出:"hello" 是什么促使它自动执行的?,来看下面的代码 // 在传统写法上去掉小括号,并在前面加上运算符 ~,!,+,- ~function(){ alert('hello'); }(); !function

avascript中的自执行匿名函数

Javascript中的自执行匿名函数 格式: (function(){ //代码 })(); 解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数. 来个带参数的例子: (function(arg){ alert(arg+100); })(20); // 这个例子返回120. 重要用途:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装

自执行匿名函数

自执行匿名函数: 常见格式:(function() { /* code */ })(); 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数. 作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访问,除非你允许(变量前加上window,这样该函数或变量就成为全局).各JavaScript库的代码也基本是这种组织形式. 总结一下,执行函数的作用主要为 匿名 和 自动执行

jQuery插件的立即执行匿名函数

匿名函数:就是指没有函数名的函数.jQuery的“立即执行匿名函数”结构:(function(){     //此处为jquery的逻辑代码})() 使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表).例子如下: alert((function(x,y){return x+y;})(2,3));                  // "5"  alert((new Function("x","y","return x*y

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

匿名函数就是没有函数名的函数.这篇文章主要介绍了Javascript自执行匿名函数(function() { })()的原理浅析的相关资料,需要的朋友可以参考下 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数 下面是一个最常见的自执行函数: // 传统匿名函数 (function() { alert('hello'); })(); 这段代码的执行效果就是在页面再载入时弹出

[Js/Jquery]立即执行匿名函数

摘要 有时使用js写了一个匿名方法,需要立即执行.因为没有方法名称,无法在其它地方调用. 匿名函数 匿名函数,可以认为是没有方法名称的函数. js中如果想执行匿名函数,结构如下: (function () { //逻辑代码 })() 使用()将匿名函数括起来,后面再加一对小括号(包含参数列表). 例如: alert((function (x, y) { return x + y; })(2, 3)); 命名函数自调用 (function myfunc() { alert("23333"

javascript自执行匿名函数

1)自执行匿名函数: 常见格式:(function() { /* code */ })(); 2)作用:       function中的code代码在解释时就已经在运行了.因此可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访问,除非你允许(变量前加上window,这样该函数或变量就成为全局).各JavaScript库的代码也基本是这种组织形式. 3)例子: 在html中输入以下代码,页面加载时,就会弹出1:    (function() {alert(1)

js 自执行匿名函数(转载)

自执行匿名函数: 常见格式:(function() { /* code */ })(); 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数. 作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访问,除非你允许(变量前加上window,这样该函数或变量就成为全局).各JavaScript库的代码也基本是这种组织形式. 总结一下,执行函数的作用主要为 匿名 和 自动执行

Javascript中的自执行匿名函数(个人理解也叫立即执行的匿名函数)的理解

格式: (function(){ //代码 })(); 包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数. (function(arg){ alert(arg+100); })(20); // 这个例子返回120. 回来看看jquery的插件编写 (function($) { // Code goes here })(jQuery); 这样代码等同于 var a=functon($) {//code }; a(