欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js匿名函数的理解

程序员文章站 2022-04-06 08:11:30
...

摘要:

定义函数的方式有两种,一种是函数声明,一种是函数表达式(匿名函数)。
函数声明:

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

JavaScript无论你怎么去定义你的函数,JS解释器都会把它翻译成一个Function对象。

alert(typeof abc);// “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元素事件处理函数的时候,我们通常都不会为他们定名字,而是赋予它的对应事件引用一个匿名函数。
对匿名函数的调用其实还有一种做法,使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表)。我们再看一下以下例子:

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

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

 var sayHi=function(){alert("hi")};
   sayHi();

执行匿名函数: 给它起个名字,后面加个括号,就可以执行了。那么也就是可以在函数后面直接加括号就可以执行,而不用给它起名了。

三、使用场景

模拟块级作使用域,减少全局变量。执行完匿名函数,存储在内存中相对应的变量会被销毁,从而节省内存。再者,在大型多人开发的项目中,用块级作使用域,会大大降低命名冲突的问题,从而避免产生严重后果。自此开发者再也不必担心搞乱全局作使用域了。

总结:

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

参考:
JS中的匿名函数