`
swincle
  • 浏览: 78669 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

对javascript匿名函数的理解(透彻版)

 
阅读更多

网上很多解释,我无法理解,我想知道原理。。。这篇文章应该可以透彻一点

 

Query片段:

  1. (function(){  
  2. //这里忽略jQuery所有实现  
  3. })();  

   半年前初次接触jQuery的时候,我也像其他人一样很兴奋地想看看源码是什么样的。然而,在看到源码的第一眼,我就迷糊了。为什么只有一个匿 名函数又没看到运行(当然是运行了……),就能有jQuery这么个函数库了?于是,我抱着疑问来到CSDN。结果相信现在很多人都很清楚了(因为在我之 后也不乏来者,呵呵~)。当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来!真神奇哦!

  嘿嘿!胡 闹到此为止。在这一节,我们碰到的jQuery片段是一组立即运行的匿名函数。而这种用法在论坛上也曾引起过激辩——这段代码究竟属不 属于闭包呢?带着这个疑问,我们从基础开始,分析每个关键要素,寻找属于自己的答案。(没错,自己的答案!在我看来,所有理论只是形式,只要它有利于我们 的应用实现,就是可取的——黑猫白猫,抓到老鼠的就是好猫!)

  要说匿名函数,我们首先要由函数本身说起。函数的定义如下:

函数是将唯一的输出值赋予给每一输入的“法则”。

  当然,这只是数学上的定义。但是,在计算机编程语言中,函数的定义也八九不离十。因为,我们都知道,计算机中的函数,也类似数学定义中的描述,它是将输入的若干数据,经过代码设定的逻辑操作处理后,返回唯一的输出的一组代码组合块。——当然,特例是,输入的数据为空或输出的数据为空,或者两者都为空。

  下面,我们先初步了解一下和匿名函数相关的概念。

  • 函数声明(function 语句)

  要使用一个函数,我们就得首先声明它的存在。而我们最常用的方式就是使用function语句来定义一个函数,如:

  1. function abc(){  
  2.   // code to process  
  3. }  

   当然,你的函数也可以是带参数的,甚至是带返回值的。

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

  但是,无论你怎么去定义你的函数,JS解释器都会把它翻译成一个Function对象。例如,你在定义上面的其中一个例子的函数号,再输入如下代码:

  1. alert(typeof abc);// "function"  

  你的浏览器就会弹出提示框,提示你abc是一个Function对象。那么Function对象究竟是什么呢?

  • Function 对象

  Function对象是JavaScript里面的固有对象,所有的函数实际上都是一个Function对象。关于这个方面的讨论,我们留到下一个专题节。我们先看看,Function对象能不能直接运用构造函数创建一个新的函数呢?答案是肯定的。例如:

  1. var abc = new Function("x","y","return x*y;");  
  2. alert(abc(2,3)); // "6"  

  相信大家现在对如何声明一个函数应该是有所了解了。那么什么才是匿名函数呢?

  • 声明匿名函数

  顾名思义,匿名函数就是没有实际名字的函数。例如,我们把上面的例子中,函数的名字去掉,再判断一下他是不是一个函数:

  1. alert(typeof function(){});// "function"  
  2. alert(typeof function(x,y){return x+y;});// "function"  
  3. alert(typeof new Function("x","y","return x*y;"))// "function"  

  我们可以很容易地看到,它们全都是Function对象,换言之,他们都是函数,但是他们都有一个特点——没有名字。所以我们把他们称作“匿名函数”。然而,正因为他们没有“名字”,我们也没有办法找到他们。这就引申了如何去调用一个匿名函数的问题了。

  • 匿名函数的调用

  要调用一个函数,我们必须要有方法定位它,引用它。所以,我们会需要帮它找一个名字。例如:

  1. var abc=function(x,y){  
  2.   return x+y;  
  3. }  
  4. alert(abc(2,3)); // "5"  

  上面的操作其实就等于换个方式去定义函数,这种用法是我们比较频繁遇到的。例如我们在设定一个DOM元素事件处理函数的时候,我们通常都不会为他们定名字,而是赋予它的对应事件引用一个匿名函数。

  对匿名函数的调用其实还有一种做法,也就是我们看到的jQuery片段——使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表)。我们再看一下以下例子:

  1. alert((function(x,y){return x+y;})(2,3));// "5"  
  2. alert((new Function("x","y","return x*y;"))(2,3));// "6"  

  很多人或许会奇怪,为什么这种方法能成功调用呢?觉得这个应用奇怪的人就看一下我以下这段解释吧。

  大家知道小括号的作用吗?小括号能把我们的表达式组合分块,并且每一块,也就是每一对小括号,都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。所以,当我们用一对小括号把匿名函数括起来的时候,实际上小括号对返回的,就是一个匿名函数的Function对象。因此,小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表,就会实现普通函数的调用形式。

  不知道以上的文字表述大家能不能看明白,如果还是理解不了的话,再看一下以下的代码试试吧。

  1. var abc=function(x,y){return x+y;};// 把匿名函数对象赋给abc  
  2. // abc的constructor就和匿名函数的constructor一样了。也就是说,两个函数的实现是一样的。  
  3. alert((abc).constructor==(function(x,y){return x+y;}).constructor);  

  PS:constructor是指创建对象的函数。也就是函数对象所代表的函数体。

   总之,将其(被小括号包含的匿名函数)理解为括号表达式返回的函数对象,然后就可以对这个函数对象作正常的参数列表调用了。(前面这里犯了个错 误,只有函数表达式还是不能直接调用函数的,去掉匿名函数括号必须要伴随将表达式赋值。也就是(function(){alert(1)})()应该是与 a=function(){alert(1)}()等价,不能连a=都去掉。)

  • 闭包

   闭包是什么?闭包是指某种程序语言中的代码块允许一级函数存在并且在一级函数中所定义的自由变量能不被释放,直到一级函数被释放前,一级函数外也能应用这些未释放的自由变量。

  怎样?看得一头冒汗吧……没事,我也是(虽然是我是了解的,只是表达能力的问题)。让我们换个更加简单的方法说明:闭包,其实是一种语言特性,它是指的是程序设计语言中,允许将函数看作对象,然后能像在对象中的操作搬在函数中定义实例(局部)变量,而这些变量能在函数中保存到函数的实例对象销毁为止,其它代码块能通过某种方式获取这些实例(局部)变量的值并进行应用扩展。

  不知道这么再解释后会否更加清晰,如果还是不明白,那么我们再简化一下:闭包,其实就是指程序语言中能让代码调用已运行的函数中所定义的局部变量。

  现在我们看一个例子:

  1. var abc=function(y){  
  2. var x=y;// 这个是局部变量  
  3. return function(){  
  4.   alert(x++);// 就是这里调用了闭包特性中的一级函数局部变量的x,并对它进行操作  
  5.   alert(y--);// 引用的参数变量也是自由变量  
  6. }}(5);// 初始化  
  7. abc();// "5" "5"  
  8. abc();// "6" "4"  
  9. abc();// "7" "3"  
  10. alert(x);// 报错!“x”未定义!  

  看到这里,你能判断究竟jQuery的那个代码片段是否闭包了吗?

  以我的理解来说吧。是 否应用了闭包特性,必须确定该段代码有没有 最重要的要素:未销毁的局部变量。那么很显然,没有任何实现的匿名函数不可能应用了闭包特性。但如果匿名函数里面有实现呢?那也还得确定它的实现中有没有 用到那些未销毁的局部变量。所以如果问你那个开篇中的jQuery代码片段是应用了JS里的什么特性?那么它只是匿名函数与匿名函数的调用而已。但是,它 隐含了闭包的特性,并且随时可以实现闭包应用。因为JS天生就是有这个特性的!(这只是我的理解,我也想知道你的理解,欢迎交流!关于闭包,有机会还是独立再开一个专题吧!)

分享到:
评论

相关推荐

    Javascript的匿名函数

    ### JavaScript中的匿名函数 在JavaScript编程语言中,**匿名函数**是一种非常实用且常见的特性,它们没有具体的名称,通常作为参数传递给其他函数或者在需要函数作为值的地方使用。这种类型的函数可以增加代码的...

    JavaScript 匿名函数和闭包介绍

    在讨论JavaScript编程语言时,匿名函数和闭包是两个重要的概念,它们在函数式编程和模块化代码设计中扮演着核心角色。匿名函数是没有具体名称的函数,它们可以是独立的,也可以是表达式的一部分,通常用于定义临时...

    匿名函数的一点知识

    标题“匿名函数的一点知识”简洁明了地指出本文将围绕JavaScript中的匿名函数进行讲解,旨在帮助读者深入理解匿名函数的概念、用法及特性。 #### 描述解读:“此txt文档是非常不错的。希望能帮助你更好的理解匿名...

    深入研究JavaScript的匿名函数.doc

    JavaScript中的匿名函数是一种没有明确标识符的函数表达式,它可以...理解并熟练运用匿名函数是提升JavaScript编程技能的关键。通过深入研究这些概念,开发者可以更好地利用JavaScript的特性,编写高效、模块化的代码。

    JavaScript程序设计课件:匿名函数.pptx

    概念:所谓函数表达式指的是将声明的函数赋值给一个变量,通过变量完成函数的调用和参数的传递,它也是JavaScript中另一种实现自定义函数的方式。 5.5 匿名函数 函数表达式 var fn = function sum(num1, num2) { ...

    javascript匿名函数实例分析

    本文将围绕JavaScript的匿名函数展开,通过实例分析,详细介绍匿名函数的定义、用法以及需要注意的事项。 首先,JavaScript中的函数可以有几种不同的定义方式。第一种是通过构造函数的方式,使用new Function()的...

    JS匿名函数、闭包

    **匿名函数**,又称**拉姆达函数**,是一种在JavaScript中常见的函数形式,这类函数没有名称,因此不能像命名函数那样通过名称来调用。匿名函数通常作为临时使用的函数,在需要的地方直接定义并执行。 ##### 特点:...

    JavaScript中匿名函数的用法及优缺点详解_.pdf

    JavaScript中的匿名函数是一种不具有名称的函数,它们主要通过函数表达式或Function构造函数来创建。匿名函数在JavaScript中有着广泛的应用,特别是在避免全局变量污染、实现模块化和函数式编程等方面。以下是对匿名...

    Javascript自执行匿名函数(function() { })()的原理浅析_.docx

    ### JavaScript自执行匿名函数(function() { })()的原理解析 #### 概述 JavaScript作为一种广泛应用于Web开发的脚本语言,其...通过对自执行匿名函数的理解和运用,开发者能够在实际项目中更好地组织和优化代码结构。

    深入理解JavaScript系列

    深入理解JavaScript系列(2):揭秘命名函数表达式 深入理解JavaScript系列(3):全面解析Module模式 深入理解JavaScript系列(4):立即调用的函数表达式 深入理解JavaScript系列(5):强大的原型和原型链 ...

    理解JavaScript中函数的使用

    通过对JavaScript中函数的深入理解,我们可以更好地利用它们来构建高效、可维护的代码。函数不仅能够帮助我们将复杂的任务分解成更小的部分,而且还能通过组合这些部分来创建强大的功能。无论是在简单的脚本还是复杂...

    javascript函数式编程

    JavaScript函数式编程是一种编程范式,它强调将计算视为数据处理的过程,并且重视函数作为第一类公民,即函数可以作为变量赋值、作为参数传递、作为返回值返回。这种编程风格在JavaScript中尤其常见,因为它提供了...

    JavaScript之函数(ppt)

    JavaScript之函数(ppt)JavaScript之函数(ppt)JavaScript之函数(ppt)JavaScript之函数(ppt)JavaScript之函数(ppt)JavaScript之函数(ppt)JavaScript之函数(ppt)JavaScript之函数(ppt)JavaScript之函数...

    javascript指南和函数式编程

    而《JavaScript函数式.zip》可能是一份关于JavaScript函数式编程的资料集合,函数式编程是一种编程范式,强调使用函数和避免改变状态。其中可能涵盖以下知识点: 1. **纯函数**:理解纯函数的定义,即给定相同的...

    JavaScript函数式编程.pdf

    以上是对“JavaScript函数式编程”可能包含的知识点的一个大致介绍。考虑到文档中提供的信息有限,这些知识点基于通用的JavaScript函数式编程概念。如果要详细学习和应用这些概念,需要查看具体的教材或者文档来获取...

    js匿名函数的调用示例(形式多种多样).docx

    这些错误通常是由于对匿名函数的概念理解不清造成的。 ##### 4.2 注意事项 - **小括号的作用**:小括号可以把表达式组合分块,并且每一块都有一个返回值。对于匿名函数来说,小括号的使用可以确保函数被正确地调用...

    JavaScript匿名函数用法分析

    JavaScript中函数是一种对象类型,它不仅可以被命名,也可以是匿名的。匿名函数,顾名思义,就是没有名称的函数,它非常适合用作一次性或者局部...理解并合理使用匿名函数,是每个JavaScript开发者必须掌握的技能之一。

    Javascript 匿名函数及其代码模式原理

    在学习JavaScript编程时,我们经常会遇到匿名函数的概念,这是...扩展阅读部分提到了关于JavaScript中括号含义的进一步探讨,建议读者深入了解函数声明周围的括号的含义,这有助于在复杂场景中准确理解和应用匿名函数。

    js中匿名函数的创建与调用方法分析.docx

    ### JavaScript中匿名函数的...理解和熟练掌握匿名函数及其调用方法对于编写高效、清晰的JavaScript代码至关重要。通过学习上述内容,相信你已经掌握了匿名函数的基本用法以及如何利用它们来提高代码的质量和可维护性。

Global site tag (gtag.js) - Google Analytics