JS匿名函数

最新推荐文章于 2024-08-23 13:31:41 发布

comaker

最新推荐文章于 2024-08-23 13:31:41 发布

阅读量81

点赞数

分类专栏： JavaScript相关文章标签： jQuery JavaScript ViewUI

本文链接：https://blog.csdn.net/comaker/article/details/83800044

版权

JavaScript相关专栏收录该内容

4 篇文章 0 订阅

订阅专栏

js匿名函数确实是个好东西.

Javascript代码

<body onload="alert('http://www.baidu.com/');">  
<script type="text/javascript">  
void function()
{  
	alert('弹出框'); 
}(); 
</script>
</body>

<body onload="alert('http://www.baidu.com/');">
<script type="text/javascript">
void function()
{
	alert('弹出框');
}();
</script>
</body>

还可以写成:

Javascript代码

<body onload="alert('http://www.baidu.com/');">
<script type="text/javascript">
(function()
{
	alert('弹出框');
})();
</script>
</body>

<body onload="alert('http://www.baidu.com/');">
<script type="text/javascript">
(function()
{
	alert('弹出框');
})();
</script>
</body>

从以上例子中可以看出,js匿名函数的执行是在 onload 之前,那么空函数是否可以取代onload的动作?

js匿名函数的写法还有n多种.
顾名思义，匿名函数就是没有实际名字的函数。例如，我们把上面的例子中，函数的名字去掉，再判断一下他是不是一个函数：
复制代码代码如下:

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" 
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" 
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); 
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=都去掉。）