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 相关文章推荐
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
js实现星星打分效果
Jul 05 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 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
第十二节--类的自动加载
2006/11/16 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
js评分组件使用详解
2017/06/06 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
深入浅析Python传值与传址
2018/07/10 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
python实现合并两个排序的链表
2019/03/03 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Python字符串三种格式化输出
2020/09/17 Python
python与idea的集成的实现
2020/11/20 Python
师范生见习报告
2014/10/31 职场文书
个人工作能力自我评价
2015/03/05 职场文书
2015年信访工作总结
2015/04/07 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
python glom模块的使用简介
2021/04/13 Python
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python