javascript(jquery)_匿名函数

一.什么是匿名函数

匿名函数：就是没有函数名的函数

二.为什么使用匿名函数

1.最大的用处就是创建闭包

三.匿名函数定义(怎么使用匿名函数)

1.这种方法使用了Function构造函数，把参数列表和函数体都作为字符串

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

2.

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

3.函数调用

double(2);

4.或者定义的时候直接()调用,例如

(function(x){

return x*2

})(3);

四.闭包

1.闭包说白了就是函数的嵌套，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕.

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

function checkClosure(){

    var str = 'rain-man';

    setTimeout(

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

    , 2000);

}

checkClosure();

b).使用闭包就可以让代码更加清晰

function forTimeout(x, y){

    alert(x + y);

}

function delay(x , y , time)

{

 setTimeout(function(){forTimeout(x , y) },time);

}

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

(function(x , y){

    return x + y;

})(2 , 3);

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

var outer = null;

(function(){

    var one = 1;

    function inner (){

        one += 1;

        alert(one);

    }

    outer = inner;

})();

outer();    //2

outer();    //3

outer();    //4

e).使用闭包需要注意的问题:闭包允许内层函数引用父函数中的变量，但是该变量是最终值

/**

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

解决方法一：

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

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

    (function(index){

        lists[ index ].onmouseover = function(){

            alert(index);

        };

    })(i);

}

解决方法二：

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);

    };

}

解决方法三：

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);

}
f):内存泄露

使用闭包十分容易造成浏览器的内存泄露，严重情况下会是浏览器挂死，感兴趣的的话可以参考：http://www.cnblogs.com/rainman/archive/2009/03/07/1405624.html。

巴特西

javascript(jquery)_匿名函数

f):内存泄露

最新文章

热门文章