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的eval JSON object问题
Nov 15 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
vue自动化表单实例分析
May 06 Javascript
js new Date()实例测试
Oct 31 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 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
Codeigniter发送邮件的方法
2015/03/19 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
Js apply方法详解
2017/02/16 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
python模仿网页版微信发送消息功能
2018/02/24 Python
基于python实现聊天室程序
2018/07/27 Python
python tkinter基本属性详解
2019/09/16 Python
Python @property使用方法解析
2019/09/17 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
生物化工工艺专业应届生求职信
2013/10/08 职场文书
办公室前台岗位职责
2014/01/04 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
仓库组长岗位职责
2014/01/29 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
电视新闻稿
2015/07/17 职场文书
汶川大地震感悟
2015/08/10 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL