Javascript的匿名函数与自执行

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

函数的定义，大致可分为三种方式：

第一种：这也是最常规的一种


1

2

3

function double(x){   

    return 2 * x;      

}

第二种：这种方法使用了Function构造函数，把参数列表和函数体都作为字符串，很不方便，不建议使用。


1

var double = new Function(‘x‘, ‘return 2 * x;‘);

第三种：


1

var double = function(x) { return 2* x; }

注意“=”右边的函数就是一个匿名函数，创造完毕函数后，又将该函数赋给了变量square。

匿名函数的创建

第一种方式：就是上面所讲的定义square函数，这也是最常用的方式之一。

第二种方式：


1

2

3

(function(x, y){  

    alert(x + y);    

})(2, 3);

这里创建了一个匿名函数(在第一个括号内)，第二个括号用于调用该匿名函数，并传入参数。括号是表达式，是表达式就有返回值，所以可以在后面加一对括号让它们执行.

自执行的匿名函数

1. 什么是自执行的匿名函数?
    它是指形如这样的函数: (function {// code})();

2. 疑问
    为什么(function {// code})();可以被执行, 而function {// code}();却会报错?

3. 分析
    (1). 首先, 要清楚两者的区别:
    (function {// code})是表达式, function {// code}是函数声明.
    (2). 其次, js"预编译"的特点:
    js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.
    (3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;
    当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

另外， 函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……

如：


1

2

3

!function(){  

  alert("另类的匿名函数自执行");  

}();

匿名函数与闭包

闭包的英文单词是closure，这是JavaScript中非常重要的一部分知识，因为使用闭包可以大大减少我们的代码量，使我们的代码看上去更加清晰等等，总之功能十分强大。

闭包的含义：闭包说白了就是函数的嵌套，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕（这点涉及JavaScript作用域链）。


1

2

3

4

5

6

7

function checkClosure(){ 

    var str = ‘rain-man‘; 

    setTimeout( 

        function(){ alert(str); } //这是一个匿名函数 

    , 2000); 

} 

checkClosure();

这个例子看上去十分的简单，仔细分析下它的执行过程还是有许多知识点的：checkClosure函数的执行是瞬间的（也许用时只是0.00001毫秒），在checkClosure的函数体内创建了一个变量str，在checkClosure执行完毕之后str并没有被释放，这是因为setTimeout内的匿名函数存在这对str的引用。待到2秒后函数体内的匿名函数被执行完毕,str才被释放。

用闭包来优化代码：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function forTimeout(x, y){ 

    alert(x + y); 

} 

function delay(x , y  , time){ 

    setTimeout(‘forTimeout(‘ +  x + ‘,‘ +  y + ‘)‘ , time);     

} 

/** 

 * 上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰 

 * function delay(x , y , time){ 

 *     setTimeout( 

 *         function(){ 

 *             forTimeout(x , y)  

 *         }           

 *     , time);    

 * } 

 */

匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。


1

2

3

4

5

6

7

8

var oEvent = {}; 

(function(){  

    var addEvent = function(){ /*代码的实现省略了*/ }; 

    function removeEvent(){} 

    

    oEvent.addEvent = addEvent; 

    oEvent.removeEvent = removeEvent; 

})();

在这段代码中函数addEvent和removeEvent都是局部变量，但我们可以通过全局变量oEvent使用它，这就大大减少了全局变量的使用，增强了网页的安全性。 我们要想使用此段代码：oEvent.addEvent(document.getElementById(‘box‘) , ‘click‘ , function(){});


1

2

3

4

5

6

7

8

var rainman = (function(x , y){ 

    return x + y; 

})(2 , 3); 

/** 

 * 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。 

 * var rainman = function(x , y){ 

 *    return x + y; 

 * }(2 , 3);

在这里我们创建了一个变量rainman，并通过直接调用匿名函数初始化为5，这种小技巧有时十分实用。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

var outer = null; 

    

(function(){ 

    var one = 1; 

    function inner (){ 

        one += 1; 

        alert(one); 

    } 

    outer = inner; 

})(); 

    

outer();    //2 

outer();    //3 

outer();    //4

这段代码中的变量one是一个局部变量（因为它被定义在一个函数之内），因此外部是不可以访问的。但是这里我们创建了inner函数，inner函数是可以访问变量one的；又将全局变量outer引用了inner，所以三次调用outer会弹出递增的结果。

注意

1 闭包允许内层函数引用父函数中的变量，但是该变量是最终值


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

/** 

 * <body> 

 * <ul> 

 *     <li>one</li> 

 *     <li>two</li> 

 *     <li>three</li> 

 *     <li>one</li> 

 * </ul> 

 */

    

var lists = document.getElementsByTagName(‘li‘); 

for(var i = 0 , len = lists.length ; i < len ; i++){ 

    lists[ i ].onmouseover = function(){ 

        alert(i);     

    }; 

}

你会发现当鼠标移过每一个<li>元素时，总是弹出4，而不是我们期待的元素下标。这是为什么呢？注意事项里已经讲了（最终值）。显然这种解释过于简单，当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。

解决方法一：


1

2

3

4

5

6

7

8

var lists = document.getElementsByTagName(‘li‘); 

for(var i = 0 , len = lists.length ; i < len ; i++){ 

    (function(index){ 

        lists[ index ].onmouseover = function(){ 

            alert(index);     

        };                     

    })(i); 

}

解决方法二：


1

2

3

4

5

6

7

var lists = document.getElementsByTagName(‘li‘); 

for(var i = 0, len = lists.length; i < len; i++){ 

    lists[ i ].$$index = i;    //通过在Dom元素上绑定$$index属性记录下标 

    lists[ i ].onmouseover = function(){ 

        alert(this.$$index);     

    }; 

}

解决方法三：


1

2

3

4

5

6

7

8

9

function eventListener(list, index){ 

    list.onmouseover = function(){ 

        alert(index); 

    }; 

} 

var lists = document.getElementsByTagName(‘li‘); 

for(var i = 0 , len = lists.length ; i < len ; i++){ 

    eventListener(lists[ i ] , i); 

}

2 内存泄露

使用闭包十分容易造成浏览器的内存泄露，严重情况下会是浏览器挂死

文章来源于网络，仅供个人收藏。

时间： 2024-08-27 09:33:34

Javascript的匿名函数与自执行的相关文章

javascript匿名函数的各种执行形式

近期在研究Pomelo源码,这个框架基于Node.js,所以非要频繁地与JavaScript脚本打交道不可.因此,本文中我们来总结 javascript语言中匿名函数的主要目的及各种存在形式.其实,匿名函数在许多语言中都有提供,这个词语各位应该不陌生. 一.函数与匿名函数        首先,我们来看一下在javascript中正常函数定义的语法: function functionname(var1,var2,...,varX) {     //...函数体 } 如上所示,正常函数的定义需要一

JavaScript中的匿名函数、立即执行函数和闭包

匿名函数是没有函数名的,不能单独使用: 立即执行函数是基于匿名函数实现的,也没有函数名,会在定义后立即执行: 闭包是有权访问另一个函数作用域中的变量的函数.匿名函数.立即执行函数只要满足 有权访问另一个函数作用域中的变量 这一个条件,就成了闭包. 匿名函数 匿名函数:没有函数名的函数 匿名函数不能单独定义与使用 function foo() { console.log('普通函数'); } // 去掉函数名 foo function () { // SyntaxError: Function s

谈谈Javascript的匿名函数

JQuery 里面有这么一种代码: (function(){ // code here })(); 当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来,神奇吧! 要说匿名函数,我们首先要由函数本身说起.函数的定义如下:函数是将唯一的输出值赋予给每一输入的“法则”.偏关县信访局 当然,这只是数学上的定义.但是,在计算机编程语言中,函数的定义也八九不离十.因为我们都知道,计算机中的函数,也类似数学定义中的描述,它是将输入的若干数据,经过代码设定的逻辑操作处理后,返回唯一的输

Javascript的匿名函数

一.什么是匿名函数?在Javascript定义一个函数一般有如下三种方式:函数关键字(function)语句:function fnMethodName(x){alert(x);}函数字面量(Function Literals):var fnMethodName = function(x){alert(x);}Function()构造函数:var fnMethodName = new Function('x','alert(x);')上面三种方法定义了同一个方法函数fnMethodName,第1

第九章 Javascript之匿名函数

分析: 1.所谓匿名函数,从字面意思理解,就是没有名字的函数,js 用()来代替(注意,是英文状态下的括号) 2.定义形式: function (){ //to add codes that you want to add }   3.匿名函数作用 (1)与闭包函数相比较,最大作用是不污染全局对象,一旦执行完毕,GC自动回收内存,这是与闭包函数本质的区别.闭包函数的一大特点是: 变量常驻内存,只有关闭浏览器时,才释放. function f1(){ var n=999; nAdd=functio

JavaScript中匿名函数的多种写法

匿名函数没有实际名字,也没有指针,怎么执行滴?  其实大家可以看看小括号的意义就应该可以理解.小括号有返回值,也就是小括号内的函数或者表达式的返回值,所以说小括号内的function返回值等于小括号的返回值,不难理解 (function(){})()可以将没有名字的函数执行了把- 关于匿名函数写法,很发散~ 最常见的用法: 代码如下: (function() { alert('water'); })(); 当然也可以带参数: 代码如下: (function(o) { alert(o); })('

JavaScript的匿名函数和模块化的使用方法

对于开发人员来说,很多时候我们都会涉及到JavaScript的使用,而在使用过程中,最令人沮丧的就是变量没有相应的使用范围. 在开发中,对于任何变量.数组.函数.对象等,只要不在函数的内部,都会被默认为是全局的,意味着页面上的其他脚本都可以访问它,并可进行重写覆盖. 对于不必要放在函数内部的变量,我们要如何保证不被其他代码访问并重写覆盖呢?这时就需要将变量放在一个匿名函数的内部,定义完后立即调用,例如,在JavaScript中按如下方式编写,将会产生三个全局变量和两个全局函数: var name

JavaScript&amp;jQuery.匿名函数.立即函数

匿名函数 定义:有参数,有函数体,可是没有函数名 window.onload=function (ev) {     // 声明匿名函数,这个函数没有名字,同时赋值给变量area     var area=function(length,width){         return length*width;     };     // 调用时调用变量名,不是函数名     var value=area(80,60);     document.write("桌子的面积是"+value

JavaScript中匿名函数this指向问题

this对象是在运行时基于函数执行环境绑定的,在全局函数中,this=window,在函数被作为某个对象的方法调用时,this等于这个对象. 但是匿名函数的执行环境是全局性的,所以匿名函数的this指向是window var name = 'window' var person = { name :'Alan', sayName:function () { return function () { console.log(this.name) } } } person.sayName()() /