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 相关文章推荐
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 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
ajax php 实现写入数据库
2009/09/02 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
vue.js简单配置axios的方法详解
2017/12/13 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
详解在Python和IPython中使用Docker
2015/04/28 Python
简析Python的闭包和装饰器
2016/02/26 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
房地产资料员岗位职责
2014/07/02 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技