JavaScript中匿名函数的用法及优缺点详解


Posted in Javascript onJune 01, 2016

匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染。

这在给一个不是很熟悉的页面增加Javascript时非常有效,也很优美。

一、什么是匿名函数?

在Javascript定义一个函数一般有如下三种方式:

函数关键字(function)语句:

function fnMethodName(x){alert(x);}

函数字面量(Function Literals):

var fnMethodName = function(x){alert(x);}

Function()构造函数:

var fnMethodName = new Function('x','alert(x);')

上面三种方法定义了同一个方法函数fnMethodName,

第1种就是最常用的方法,后两种都是把一个函数复制给变量fnMethodName,而这个函数是没有名字的,即匿名函数。

实际上,相当多的语言都有匿名函数。

二、函数字面量和Function()构造函数的区别

虽然函数字面量是一个匿名函数,但语法允许为其指定任意一个函数名,当写递归函数时可以调用它自己,使用Function()构造函数则不行。

var f = function fact(x) { if (x < = 1) return 1; else return x*fact(x-1); };

Function()构造函数允许运行时Javascript代码动态的创建和编译。在这个方式上它类似全局函数eval()。

Function()构造函数每次执行时都解析函数主体,并创建一个新的函数对象。所以当在一个循环或者频繁执行的函数中调用Function()构造函数的效率是非常低的。相反,函数字面量却不是每次遇到都重新编译的。

用Function()构造函数创建一个函数时并不遵循典型的作用域,它一直把它当作是顶级函数来执行。

var y = "global";

function constructFunction() { var y = "local"; return new Function("return y"); // 无法获取局部变量 } alert(constructFunction()()); // 输出 “global”和函数关键字定义相比Function()构造器有自己的特点且要难以使用的多,

所以这项技术通常很少使用。

而函数字面量表达式和函数关键字定义非常接近。

考虑前面的区别,虽然有消息说字面量的匿名函数在OS X 10.4.3下的某些webkit的引擎下有bug,

但我们平常所说的匿名函数均指采用函数字面量形式的匿名函数。

三、匿名函数的代码模式

错误模式:其无法工作,浏览器会报语法错。

function(){ alert(1); }();

函数字面量:首先声明一个函数对象,然后执行它。

(function(){ alert(1); } ) ( );

优先表达式:

( function(){ alert(2); } ( ) );

void操作符:

void function(){ alert(3); }()这三种方式是等同的,hedger wang因为个人原因比较喜欢第3种,而在实际应用中我看到的和使用的都是第1种。

四、匿名函数的应用

《Javascript的一种模块模式》中的第一句话就是“全局变量是魔鬼”。

配合var关键字,匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染。

这在给一个不是很熟悉的页面增加Javascript时非常有效,也很优美。

实际上,YUI以及其相应的范例中大量使用匿名函数,其他的Javascript库中也不乏大量使用。

Javascript的函数式编程(functional programming)的基石。

具体请看《用函数式编程技术编写优美的 JavaScript》和《函数式JavaScript编程指南》。

以上这篇JavaScript中匿名函数的用法及优缺点详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些常用的Javascript函数
Dec 22 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
简单实现js倒计时功能
Feb 13 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 #Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 #Javascript
JS未跨域操作iframe里的DOM
Jun 01 #Javascript
jQuery实现的简单分页示例
Jun 01 #Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 #Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 #Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
php采集速度探究总结(原创)
2008/04/18 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
php强制下载文件函数
2016/08/24 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
决策树的python实现方法
2014/11/18 Python
Python生成随机数组的方法小结
2017/04/15 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
pycharm 安装JPype的教程
2019/08/08 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
自我反省检讨书
2014/01/23 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
查摆剖析材料范文
2014/09/30 职场文书
慰问信模板
2015/02/14 职场文书
计划生育工作总结2015
2015/04/03 职场文书
检讨书范文大全
2015/05/07 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA