javascript闭包函数

JavaScript中的匿名函数及函数的闭包

1、匿名函数

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

1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式

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

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

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

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

第三种:

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

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

1.2 匿名函数的创建

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

第二种方式:

(function(x, y){
    alert(x + y);
})(2, 3);

这里创建了一个匿名函数(在第一个括号内),第二个括号用于调用该匿名函数,并传入参数。

2、闭包

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

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

示例一

function checkClosure(){
    var str = ‘rain-man‘;
    setTimeout(
        function(){ alert(str); } //这是一个匿名函数
    , 2000);
}
checkClosure();

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

示例二,优化代码

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);
 * }
 */

3、举例

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

示例三:

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

    oEvent.addEvent = addEvent;
    oEvent.removeEvent = removeEvent;
})();

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

示例四:

var rainman = (function(x , y){
    return x + y;
})(2 , 3);
/**
 * 也可以写成下面的形式,因为第一个括号只是帮助我们阅读,但是不推荐使用下面这种书写格式。
 * var rainman = function(x , y){
 *    return x + y;
 * }(2 , 3);
 */

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

示例五:

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会弹出递增的结果。

4、注意

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

示例六:

/**
 * <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);
}

4.2 内存泄露

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

时间: 2024-11-03 21:02:54

javascript闭包函数的相关文章

Javascript闭包函数快速上手

闭包函数是什么?在开始学习的闭包的时候,大家很能都比较难理解.就从他的官方解释来说,都是比较概念化的. 不过我们也还是从闭包的含义出发. 闭包是指函数有自由独立的变量.换句话说,定义在闭包中的函数可以"记忆"它创建时候的环境. 官方解释说完后,我们先来看一个简单计数的例子. var c = 0; function count(){ c++; } count();// 1 count();// 2 这个例子是利用了全局变量来实现,但是这里有个问题是,c这个变量也容易被其他方式所调用,这时

javascript闭包如何实现函数的重载?

本文和大家分享的主要是妙用javascript闭包实现函数重载相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 1.准备知识 1.1 闭包 闭包是一个函数在创建时,允许该自身函数访问并操作该自身函数以外的变量时所创建的作用域.闭包可以让函数访问所有存在于该函数声明时的作用域内的变量和函数. <script>         var outerValue = "ninja";         var later;         function oute

javascript闭包和立即执行函数的作用

一.闭包--closure 先看一个闭包的例子.我们想实现一个计数器,最简单的方法就是定义一个全局变量,计数的时候将其加1.但是全局变量有风险,哪里都有可能不小心改掉它.那局部变量呢, 它只在函数内部有效,函数调用完后它就没了,而且全局没法使用.那我们用想让计数器全局使用,又不想让这个变量被随便修改怎么办.这就需要闭包了: function count(){ var i=0; return function () { return ++i; } } 这个例子实现了一个简单的计数器.函数"coun

JavaScript 闭包系列二 --- 匿名函数及函数的闭包

一. 匿名函数 1. 函数的定义,可分为三种 1) 函数声明方式 function double(x) {    return 2*x;} 2)Function构造函数,把参数列表和函数体都作为字符串,不方便,不建议使用 var double = new Function('x', 'return 2*x;'); 3)函数表达式方式 var double = function(x) {    return 2*x;} 该形式中,等号右边是一个匿名函数,创建函数完毕后,将该函数赋给了变量doubl

javascript回调函数,闭包作用域,call,apply函数解决this的作用域问题

在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实际上是一种对象,它可以“存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值”. 因为function是内置对象,我们可以将它作为参数传递给另一个函数,延迟到函数中执行,甚至执行后将它返回.这是在JavaScript中使用回调函数的精髓.本篇文章的剩余部

浅谈JavaScript的函数表达式(闭包)

前文已经简单的介绍了函数的闭包.函数的闭包就是有权访问另一个函数作用域的函数,也就是函数内部又定义了一个函数. 1 var Super=function(num){ 2 var count=num; 3 return function(){ 4 console.log(count); 5 } 6 } 7 var result=Super(3);//此时result是一个函数 8 result();//输出3 上面的代码定义了一个函数Super,同时在Super函数内部又定义了一个匿名函数作为返回

JavaScript匿名函数和闭包

概述 在JavaScript前端开发中,函数与对其状态即词法环境(lexical environment)的引用共同构成闭包(closure).也就是说,闭包可以让你从内部函数访问外部函数作用域.在JavaScript,函数在每次创建时生成闭包.匿名函数和闭包可以放在一起学习,可以加深理解.本文主要通过一些简单的小例子,简述匿名函数和闭包的常见用法,仅供学习分享使用,如有不足之处,还请指正. 普通函数 普通函数由fucntion关键字,函数名,() 和一对{} 组成,如下所示: 1 functi

JavaScript闭包中闭包函数this的指向

阅读文章前, 请先阅读阮一峰老师的这篇文章http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 前人写过的, 而且写得很好, 就没必要重复下去了. 只加一些阮老师的文章里没有说的.顺便总结一下. 引用一句话: "闭包就是functions that return function"(出处已经忘记啦) 闭包的类型: 循环闭包, 函数闭包 闭包的特点: 外部访问函数内部的值, 函数内部变量不被回收

javascript中函数的闭包自调用

话不多说, 直接上代码 // 定义一个变量outerParam, 然后使用一个闭包函数给该变量初始化 var outerParam = (function testClosure(param) { // param就是一个形参, 在函数内部使用的 param.a = "a"; // 开始对形参操作, 封装 param.b = "b"; return param; // 最后返回形参, 就是把封装好的数据返回给outerParam }(outerParam || {}