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

 更新时间:2010年03月19日 11:32:51   作者:  
很多同学知道怎么用这种匿名函数,却或许并不明白为什么这样写就能够调用匿名函数。也许知道后面的圆括号是执行前面的函数,而并不清楚前面的圆括号具有何种含义!本文将带你了解匿名函数的代码模式原理。
关于什么是匿名函数,及它带来的优势在本文就不深究了,先抛出一个常用的匿名函数:
(function(){alert('yo')})()
很多同学知道怎么用这种匿名函数,却或许并不明白为什么这样写就能够调用匿名函数。也许知道后面的圆括号是执行前面的函数,而并不清楚前面的圆括号具有何种含义!本文将带你了解匿名函数的代码模式原理。
OK,先来看看更多匿名函数调用模式:
复制代码 代码如下:

(function(){alert(1);}())
(function(){alert(2);})()
void function(){alert(3);}()

以上3个都是正确的,且在功能上都是等同的。
再来看下错误的书写方式:
4.
function(){alert('yo')}()
上面这段代码会抛出语法错误,这究竟是为什么呢?带着这个问题我们来看看秦歌给出的解答:
1.函数字面量:首先声明一个函数对象,然后执行它。
2.优先表达式:由于Javascript执行表达式是从圆括号里面到外面,所以可以用圆括号强制执行声明的函数。
3.void操作符:用void操作符去执行一个没有用圆括号包围的一个单独操作数。
好吧,先不管解答是否正确,我们把这些放到一边,再来看看函数声明的语法和函数表达式的语法说明:
一、函数声明:
复制代码 代码如下:

function name([param[, param[, ... param]]]) {
statements
}

这里的函数名称name是不可以省略的。如果省略了函数名称就会报错。
这也合理解释了为什么直接写
function(){alert('yo')}
会出错?因为编译器当他是函数声明而代码中没有出现函数名称,结果可想而知。
二、函数表达式:
复制代码 代码如下:

function [name]([param] [, param] [..., param]) {
statements
}

函数名称name可以被省略,省略name就是所谓的匿名函数。说明一点:如果需要创建匿名函数,则必须给出一个函数表达式而非函数的显式声明
现在我们可以做出更准确的解释:
1\2\3匿名函数代码模式只不过是通过括号或者void告诉编译器,把function(){}当作函数表达式来解释罢了。这其中并没有那么复杂的优先级和void操作符原理。这只不过是一个简单的语法转换。
可以想象,只要符合函数表达式的语法,我们就可以创建出N种匿名函数代码模式,比如
复制代码 代码如下:

!!function(){
alert('yo');
}()
+function(){
alert('yo');
}()

等等等等……
这其中并没有更深层的奥秘,只是函数声明与表达式的区别,如果你还不理解,也许就是你想多了想复杂了。
我们现在学习Javascript还没有特专业的培训安排与课程,编码能力的提升都是要靠自己平时的练习与积累。然而越是这样越容易忽略最基础的知识,最后把简单的问题复杂化,不可取。更有些同学是抱着能够使用的态度学习Javascript,而并不去深究,知其然而不知其所以然,其实到最后能力并没有多大的提升……更不可取!
延伸阅读:
What do parentheses surrounding a JavaScript function declaration mean?

相关文章

  • javascript预加载图片、css、js的方法示例介绍

    javascript预加载图片、css、js的方法示例介绍

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求,不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果
    2013-10-10
  • javascript时间排序算法实现活动秒杀倒计时效果

    javascript时间排序算法实现活动秒杀倒计时效果

    这篇文章主要介绍了javascript时间排序算法实现活动秒杀倒计时效果,即一个页面多个倒计时排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js获取html参数及向swf传递参数应用介绍

    js获取html参数及向swf传递参数应用介绍

    HTML页面是在客户端执行的,这样要获取参数必须使用客户端脚本如JavaScript,在这点上与服务器端脚本获取参数方式有所不同接下来将详细介绍下感兴趣的你可不要错过了哈
    2013-02-02
  • 使用three.js 绘制三维带箭头线的详细过程

    使用three.js 绘制三维带箭头线的详细过程

    遇到一个需求,在一个地铁场景里展示逃生路线,为了画这个箭头,我花费了很多时间精力,下面基于使用three.js 绘制三维带箭头线的详细过程分享给大家,感兴趣的朋友一起看看吧
    2021-10-10
  • 非常酷炫的Bootstrap图片轮播动画

    非常酷炫的Bootstrap图片轮播动画

    这篇文章主要为大家分享了非常酷炫的Bootstrap图片轮播动画,几行jQuery和animate.css库用在基本的Bootstrap轮播组件中,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • uniapp中input聚焦禁止软键盘弹出方法

    uniapp中input聚焦禁止软键盘弹出方法

    在使用uni-app完成扫码功能时,有时需要聚焦文本框的同时,需要软键盘消失,下面这篇文章主要给大家介绍了关于uniapp中input聚焦禁止软键盘弹出的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • JavaScript 中从 URL 获取数据的方法

    JavaScript 中从 URL 获取数据的方法

    这篇文章主要介绍了在 JavaScript 中从 URL 获取数据,我们使用了open函数,将请求方法类型和URL作为参数传递,并调用XMLHttpRequest()的send()方法,结合示例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • JavaScript如何删除字符串中子字符串

    JavaScript如何删除字符串中子字符串

    本文介绍了如何从 JavaScript 中的字符串中删除子字符串,并提供了两种常用的方法:replace() 方法和 split() 方法,结合示例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-05-05
  • gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

    gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

    gulp是基于Nodejs的自动任务运行器,gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。今天在学习gulp时遇到当用gulp.watch来监听js文件的变动时出现重复压缩问题,下面小编给大家解答下
    2016-08-08
  • JavaScript设计模式中的桥接和中介者模式

    JavaScript设计模式中的桥接和中介者模式

    这篇文章主要介绍了JavaScript设计模式中的桥接和中介者模式,桥接设计模式是一种偏向于组合的设计模式,而非继承的设计模式,实现的细节从一个模块推送给另一个具有单独模块的对象,而中介者设计模式是指通过一个中介者对象封装一系列的对象交互
    2022-06-06

最新评论