JavaScript中的匿名函数及函数的闭包以及作用域

1。

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

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。

  

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

下面就是我的学习笔记,对于Javascript初学者应该是很有用的。

一、变量的作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

  var
n=999;

  function f1(){

    alert(n);

  }

  f1(); // 999

另一方面,在函数外部自然无法读取函数内的局部变量。

  function f1(){

    var
n=999;

  }

  alert(n); // error

这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

  function f1(){

    n=999;

  }

  f1();

  alert(n); // 999

二、如何从外部读取局部变量?

出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。

那就是在函数的内部,再定义一个函数。

  function f1(){

    var
n=999;

    function f2(){

      alert(n); // 999

    }

  }

在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!

  function f1(){

    var
n=999;

    function f2(){

      alert(n);

    }

    return
f2;

  }

  var
result=f1();

  result(); // 999

三、闭包的概念

上一节代码中的f2函数,就是闭包。

各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢?请看下面的代码。

  function f1(){

    var
n=999;

    nAdd=function(){n+=1}

    function f2(){

      alert(n);

    }

    return
f2;

  }

  var
result=f1();

  result(); // 999

  nAdd();

  result(); // 1000

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

五、使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private
value),这时一定要小心,不要随便改变父函数内部变量的值。

六、思考题

如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。

代码片段一。

  var
name = "The Window";

  var
object = {

    name : "My Object",

    getNameFunc : function(){

      return
function(){

        return
this.name;

      };

    }

  };

  alert(object.getNameFunc()());

代码片段二。

  var
name = "The Window";

  var
object = {

    name : "My Object",

    getNameFunc : function(){

      var
that = this;

      return
function(){

        return
that.name;

      };

    }

  };

  alert(object.getNameFunc()());

  

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

在学习JavaScript的变量作用域之前,我们应当明确几点:

JavaScript的变量作用域是基于其特有的作用域链的。

JavaScript没有块级作用域。

函数中声明的变量在整个函数中都有定义。

1、JavaScript的作用域链

首先看下下面这段代码:

<script type="text/javascript">

    var
rain = 1;

    function rainman(){

        var
man = 2;

        function inner(){

            var
innerVar = 4;

            alert(rain);

        }

        inner();    //调用inner函数

    }

    rainman();    //调用rainman函数

</script>

观察alert(rain);这句代码。JavaScript首先在inner函数中查找是否定义了变量rain,如果定义了则使用inner函数中的rain变量;如果inner函数中没有定义rain变量,JavaScript则会继续在rainman函数中查找是否定义了rain变量,在这段代码中rainman函数体内没有定义rain变量,则JavaScript引擎会继续向上(全局对象)查找是否定义了rain;在全局对象中我们定义了rain = 1,因此最终结果会弹出‘1‘

作用域链:JavaScript需要查询一个变量x时,首先会查找作用域链的第一个对象,如果以第一个对象没有定义x变量,JavaScript会继续查找有没有定义x变量,如果第二个对象没有定义则会继续查找,以此类推。

上面的代码涉及到了三个作用域链对象,依次是:inner、rainman、window。

2、函数体内部,局部变量的优先级比同名的全局变量高。

<script type="text/javascript">

    var
rain = 1;    //定义全局变量 rain

    function check(){

        var
rain = 100;    //定义局部变量rain

        alert( rain );       //这里会弹出 100

    }

    check();

    alert( rain );    //这里会弹出1

</script>

3、JavaScript没有块级作用域。

这一点也是JavaScript相比其它语言较灵活的部分。

仔细观察下面的代码,你会发现变量i、j、k作用域是相同的,他们在整个rain函数体内都是全局的。

<script type="text/javascript">

    function rainman(){

        // rainman函数体内存在三个局部变量 i j k

        var
i = 0;

        if
( 1 ) {

            var
j = 0;

            for(var
k = 0; k < 3; k++) {

                alert( k );    //分别弹出 0 1 2

            }

            alert( k );        //弹出3

        }

        alert( j );            //弹出0

    }

</script>

4、函数中声明的变量在整个函数中都有定义。

首先观察这段代码:

<script type="text/javascript">

    function rain(){

        var
x = 1;

        function man(){

            x = 100;

        }

        man();        //调用man

        alert( x );    //这里会弹出 100

    }

    rain();    //调用rain

</script>

上面得代码说明了,变量x在整个rain函数体内都可以使用,并可以重新赋值。由于这条规则,会产生“匪夷所思”的结果,观察下面的代码。

<script type="text/javascript">

    var
x = 1;

    function rain(){

        alert( x );        //弹出 ‘undefined‘,而不是1

        var
x = ‘rain-man‘;

        alert( x );        //弹出 ‘rain-man‘

    }

    rain();

</script>

是由于在函数rain内局部变量x在整个函数体内都有定义( var
x= ‘rain-man‘,进行了声明),所以在整个rain函数体内隐藏了同名的全局变量x。这里之所以会弹出‘undefined‘是因为,第一个执行alert(x)时,局部变量x仍未被初始化。

所以上面的rain函数等同于下面的函数:

function rain(){

    var
x;

    alert( x );

    x = ‘rain-man‘;

    alert( x );

}

5、未使用var关键字定义的变量都是全局变量。

<script type="text/javascript">

    function rain(){

        x = 100;    //声明了全局变量x并进行赋值

    }

    rain();

    alert( x );    //会弹出100

</script>

这也是JavaScript新手常见的错误,无意之中留下的许多全局变量。

6、全局变量都是window对象的属性

<script type="text/javascript">

    var
x = 100 ;

    alert( window.x );//弹出100

    alert(x);

</script>

等同于下面的代码

<script type="text/javascript">

    window.x = 100;

    alert( window.x );

    alert(x)

</script>

  

JavaScript中的匿名函数及函数的闭包以及作用域,码迷,mamicode.com

时间: 2024-10-12 21:53:19

JavaScript中的匿名函数及函数的闭包以及作用域的相关文章

JavaScript中常见的数组操作函数及用法

昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下,这样方便大家准备参考.如果恰好你也在准备各种笔试,希望对你有所帮助.同时,也欢迎补充. 1.数组创建 创建数组应该是最简单的了,有用数组字面量创建和数组构造函数两种方法,见下: var array1 = new Array(); var array2 = []; 上面是创建数组的最常见的两种方法,其中第二种方法因为简单直观而被开发者推崇.其中,

JavaScript中取得反正切的Atan函数

JavaScript中取得反正切的Atan函数 atan 方法:返回数字的反正切值. 使用方式如下: Math.atan(number)http://www.mlyrx120.com 注意:必选项number 参数是需要计算反正切的数值表达式.返回值为其数字参数的反正切值.

javascript中可用的编码解码函数

在项目实践中可能会遇到一些特殊字符的转义问题,那么这个时候就需要js编码解码函数来解决这些情况了: 特殊字符的含义 URL编码  符号 解释 转义 # 用来标志特定的文档位置 %23 % 对特殊字符进行编码 %25 & 分隔不同的变量值对 %26 + 在变量值中表示空格 %2B / 表示目录路径 %2F \ 表示目录路径 %5C = 用来连接键和值 %3D ? 表示查询字符串的开始 %3F 空格 空格 %20 . 句号 %2E : 冒号 %3A javascript中可用的编码解码函数,有如下的

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

1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种:这也是最常规的一种 function double(x){ return 2 * x; } 第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用. var double = new Function('x', 'return 2 * x;'); 第三种

javascript中的匿名函数整理笔记

以下为总结在开源的JavaScript框架中能看到很多这样语法结构(function(){})()比如我最近看的jQuery,及chediter.刚开始的时候我看到这样的结果有点奇怪,它是怎么执行的,并且这是什么样的语法结构,最近偶尔看闭包的时候,才发现原来这是JavaScript种匿名函数(看到这个有点汗,java的匿名类见过,就从来没想到JavaScript中会有匿名函数,也是学的不够牢固).现在我们了解到以上是JavaScript匿名函数的语法结构,怎么声明函数,匿名函数JavaScrip

JavaScript中的匿名函数及函数的闭包(转)

https://www.cnblogs.com/wl0000-03/p/6050108.html 1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种:这也是最常规的一种 function double(x){ return 2 * x; } 第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用. var

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

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

浅谈JavaScript中的柯里化函数

首先,不可避免的要引经据典啦,什么是柯里化函数呢(from baidu): 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的,尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的. 用于创建已经设置好了一个或多个参数的函数 与函数绑定相似,他们之间的区

JavaScript中常见的字符串操作函数及用法汇总

1.字符串转换 字符串转换是最基础的要求和工作,你可以将任何类型的数据都转换为字符串,你可以用下面三种方法的任何一种: ? 1 2 var num= 19; // 19 var myStr = num.toString(); // "19" 你同样可以这么做: ? 1 2 var num= 19; // 19 var myStr = String(num); // "19" 或者,再简单点儿: ? 1 2 var num= 19; // 19 var myStr =