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 Object与Function使用
Jan 11 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
编程语言JavaScript简介
Oct 16 Javascript
DOM 高级编程
May 06 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
使用Dropzone.js上传的示例代码
Oct 10 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
Vue组件基础用法详解
Feb 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
php Smarty初体验二 获取配置信息
2011/08/08 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python程序控制NAO机器人行走
2019/04/29 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
如何使用PHP session
2015/04/21 面试题
写给女朋友的道歉信
2014/01/08 职场文书
职业女性的职业规划
2014/03/04 职场文书
环保公益广告语
2014/03/13 职场文书
交通事故协议书
2014/04/15 职场文书
锦旗标语大全
2014/06/23 职场文书
升学宴演讲稿
2014/09/01 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
欧元符号 €
2022/02/17 杂记
nginx 添加http_stub_status_module模块
2022/05/25 Servers
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技