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

匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数。最经常用作回调函数(callback)参数的值,很多新手朋友对于匿名函数不了解。这里就来分析一下。

function 函数名(参数列表){函数体;}

如果是创建匿名函数,那就应该是:
function(){函数体;}

因为是匿名函数,所以一般也不会有参数传给他。

为什么要创建匿名函数呢?在什么情况下会使用到匿名函数。匿名函数主要有两种常用的场景,一是回调函数,二是直接执行函数。

回调函数,像ajax的异步操作,就需要回调函数。这里就不详解。关于直接执行函数,我看一个例子就明白了:

复制代码 代码如下:

<script language="javascript">
var a = "a";
(function(){
    var a="b";
    alert(a);
})();
alert(a);
</script>


在上面这段代码中,会顺序输出两个alert框。第一个alert框内容为b,第二个为a。大家看到什么好处了吗?对的,使用函数直接执行可以限定变量的作用域,使不同脚本的相同变量可以得以共存。

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

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

复制代码 代码如下:

function abc(){
// code to process
}
function abc(){ // code to process }

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

复制代码 代码如下:

view plaincopy to clipboardprint?
function abc(x,y){
return x+y;
}
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"
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"

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxfpp.html