jQuery的匿名函数

转载不灭的火 2年前 (2023-04-06) 1142次浏览 0个评论

在使用jQuery的过程中,经常会看到一些函数没有任何函数名,却能正常执行。这些函数在jQuery里面有一个名字就叫匿名行数,通过匿名函数可以简化函数的定义,同时给变量赋值为匿名函数函数,还可以在任何地方进行匿名函数的调用。本文就通过一些样例,对你们函数,闭包等概念做一个介绍。

首先我们来看一个jQuery代码片段,看看这个jQuery的代码是否为匿名函数。

( function (){
//这里忽略所有实现
})();

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

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

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

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

函数声明

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

function abc(){
   // 函数实现
}

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

function abc(x,y){
   return x+y;
}

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

alert( typeof abc); // "function"

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

Function 对象

Function对象是JavaScript里面的固有对象,所有的函数实际上都是一个Function对象。Function对象可以直接运用构造函数创建一个新的函数。例如:

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

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

匿名函数

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

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

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

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

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

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

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

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

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

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

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

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

闭包

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

换种说法就是:闭包,其实是一种语言特性,它是指的是程序设计语言中,允许将函数看作对象,然后能像在对象中的操作般在函数中定义实例(局部)变量,而这些变量能在函数中保存直到函数的实例对象销毁为止,其它代码块能通过某种方式获取这些实例(局部)变量的值并进行应用扩展。例如:

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

是否应用了闭包特性,必须确定该段代码有没有最重要的要素:未销毁的局部变量。那么很显然,没有任何实现的匿名函数不可能应用了闭包特性。但如果匿名函数里面有实现呢?那也还得确定它的实现中有没有用到那些未销毁的局部变量。所以开篇中的jQuery 代码片段它只是匿名函数与匿名函数的调用而已。但是,它隐含了闭包的特性,并且随时可以实现闭包应用。

0 0 投票数
文章评分

版权申明:

本博客所有文章除特别声明外均采用BY-NC-SA 4.0许可协议。依据BY-NC-SA 4.0许可协议,转载请附上原文出处链接及本声明。

原文链接:https://ilearning.org.cn/program/web/jquery-de-niminghanshu.html

客官,说点什么吧!

订阅评论
提醒
guest

0 评论
内联反馈
查看所有评论
关于本站
立学网是一个分享个人学习总结的知识网站,内容覆盖编程技术讨论,金融经济,历史哲学,读书笔记,生活随笔等内容。
关注我们
关注微信公众号 关注微博