1、匿名函数

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

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

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

  1. function double(x){
  2. return 2 * x;
  3. }

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

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

第三种:

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

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

1.2 匿名函数的创建

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

第二种方式:

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

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

2、闭包

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

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

示例一

  1. function checkClosure(){
  2. var str = 'rain-man';
  3. setTimeout(
  4. function(){ alert(str); } //这是一个匿名函数
  5. , 2000);
  6. }
  7. checkClosure();

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

示例二,优化代码

  1. function forTimeout(x, y){
  2. alert(x + y);
  3. }
  4. function delay(x , y , time){
  5. setTimeout('forTimeout(' + x + ',' + y + ')' , time);
  6. }
  7. /**
  8. * 上面的delay函数十分难以阅读,也不容易编写,但如果使用闭包就可以让代码更加清晰
  9. * function delay(x , y , time){
  10. * setTimeout(
  11. * function(){
  12. * forTimeout(x , y)
  13. * }
  14. * , time);
  15. * }
  16. */

3、举例

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

示例三:

  1. var oEvent = {};
  2. (function(){
  3. var addEvent = function(){ /*代码的实现省略了*/ };
  4. function removeEvent(){}
  5.  
  6. oEvent.addEvent = addEvent;
  7. oEvent.removeEvent = removeEvent;
  8. })();

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

示例四:

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

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

示例五:

  1. var outer = null;
  2.  
  3. (function(){
  4. var one = 1;
  5. function inner (){
  6. one += 1;
  7. alert(one);
  8. }
  9. outer = inner;
  10. })();
  11.  
  12. outer(); //2
  13. outer(); //3
  14. outer(); //4

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

4、注意

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

示例六:

  1. /**
  2. * <body>
  3. * <ul>
  4. * <li>one</li>
  5. * <li>two</li>
  6. * <li>three</li>
  7. * <li>one</li>
  8. * </ul>
  9. */
  10.  
  11. var lists = document.getElementsByTagName('li');
  12. for(var i = 0 , len = lists.length ; i < len ; i++){
  13. lists[ i ].onmouseover = function(){
  14. alert(i);
  15. };
  16. }

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

解决方法一:

  1. var lists = document.getElementsByTagName('li');
  2. for(var i = 0 , len = lists.length ; i < len ; i++){
  3. (function(index){
  4. lists[ index ].onmouseover = function(){
  5. alert(index);
  6. };
  7. })(i);
  8. }

解决方法二:

  1. var lists = document.getElementsByTagName('li');
  2. for(var i = 0, len = lists.length; i < len; i++){
  3. lists[ i ].$$index = i; //通过在Dom元素上绑定$$index属性记录下标
  4. lists[ i ].onmouseover = function(){
  5. alert(this.$$index);
  6. };
  7. }

解决方法三:

  1. function eventListener(list, index){
  2. list.onmouseover = function(){
  3. alert(index);
  4. };
  5. }
  6. var lists = document.getElementsByTagName('li');
  7. for(var i = 0 , len = lists.length ; i < len ; i++){
  8. eventListener(lists[ i ] , i);
  9. }

JavaScript中的匿名函数及函数的闭包的更多相关文章

  1. [转]JavaScript中的匿名函数及函数的闭包

    JavaScript中的匿名函数及函数的闭包  原文地址:http://www.cnblogs.com/wl0000-03/p/6050108.html 1.匿名函数 函数是JavaScript中最灵 ...

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

    JavaScript中的匿名函数及函数的闭包  https://www.cnblogs.com/wl0000-03/p/6050108.html 1.匿名函数 函数是JavaScript中最灵活的一种 ...

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

    JavaScript中常见的数组操作函数及用法 昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下 ...

  4. JavaScript中常见的字符串操作函数及用法

    JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...

  5. 【转】JavaScript中的匿名函数及函数的闭包

    对闭包理解一直不甚明了,在此特转摘博文一篇以备查用. 原文地址:http://www.cnblogs.com/rainman/archive/2009/05/04/1448899.html 相关文章: ...

  6. javascript中需要自行定义的函数

    1.toString()与String() 使用方式:x.toString();-----String(x); String是万能的方法,而x.toString()则有局限性,无法将undefined ...

  7. JavaScript中的apply和call函数详解(转)

    每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,J ...

  8. javascript 中break、 continue、函数不能重载

    在javascript中,break与continue有着显著的差别. 如果遇到break语句,会终止最内层循环,无论后面还有多少计算. 如果遇到continue,只会终止此次循环,后面的自循环依然执 ...

  9. JavaScript中的apply和call函数详解

    本文是翻译Function.apply and Function.call in JavaScript,希望对大家有所帮助 转自“http://www.jb51.net/article/52416.h ...

随机推荐

  1. HDFS NameNode 设计实现解析

    接前文 分布式存储-HDFS 架构解析,我们总体分析了 HDFS 架构的主要构成组件包括:NameNode.DataNode 和 Client.本文首先进一步解析 HDFS NameNode 的设计和 ...

  2. 基于 Jenkins 快速搭建持续集成环境

      什么是持续集成 随着软件开发复杂度的不断提高,团队开发成员间如何更好地协同工作以确保软件开发的质量已经慢慢成为开发过程中不可回避的问题.尤其是近些年来,敏捷(Agile) 在软件工程领域越来越红火 ...

  3. ADO.NET的弹性连接控制[ADO.NET idle connection resiliency]

    ADO.NET连接SQL Server有时候联机会无故的中断 (例如闲置过久或是交易时间太长等因素),这时又要重新连接,在.NET Framework 4.5之前,这件事情要由开发人员自己依照ADO. ...

  4. ReactJS入门(四)—— 组件API

    本篇将介绍 React 组件的API,其中主要的几个API我们在第一篇的时候便已介绍过,这里可以做个温故知新. 本篇的代码你也可以在我的Github上获取到. setState 参数: nextSta ...

  5. ARM汇编指令调试方法

    学习ARM汇编时,少不了对ARM汇编指令的调试.作为支持多语言的调试器,gdb自然是较好的选择.调试器工作时,一般通过修改代码段的内容构造trap软中断指令,实现程序的暂停和程序执行状态的监控.为了在 ...

  6. SQL Server 权限管理

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/权限控制/管理/分配/登入名/数据库用户/角色 概述 对数据库系统而言,保证数据的安全性永远都是最重要的问题之一.一个好的数据库环 ...

  7. 我只是想开个饭店—— JavaIO模型的演变

    Java的IO...真的是我所见过的高级语言中.最最复杂的... 看着这个图我也是醉了. 但是不知不觉间,java的IO已经更新到了NIO.2了,IO库早已经不止是这个样子了,那么这个过程中,它们经历 ...

  8. A Beginner's Guide to Paxos

    Google Drive: A Beginner's Guide to Paxos The code ideas of Paxos protocol: 1) Optimistic concurrenc ...

  9. Leetcode 刷题计划

    Two Sum    21.4%    Medium Given an array of integers, return indices of the two numbers such that t ...

  10. HTTPS那些事(二)SSL证书(转载)

    原创地址:http://www.guokr.com/post/116169/   从第一部分HTTP工作原理中,我们可以了解到HTTPS核心的一个部分是数据传输之前的握手,握手过程中确定了数据加密的密 ...