Javascript 判断函数类型完美解决方案


Posted in Javascript onSeptember 02, 2009

但是,有一些细节并不为我们所熟知。John Resig 在分析了这些细节之后,为我们提供了一个完美的解决方案,本文将作详细介绍:

一、传统方法不为人所知的细节
毫无疑问,在判断函数类型时,我们使用的是typeof方法,比如:

function fn(){ 
//content 
} 
alert(typeof fn)//结果是"function"。

但是,该方法在一些浏览器中并不是像我们想像的那样工作。

1、Firefox2和Firefox3
在这两个浏览器中,用typeof检测HTML对象元素的类型,得到是一个不精确的“function”结果,而不是“object”,如HTMLDocument。如:

alert(typeof HTMLDocument); 
//在Firefox2中结果是"function"; 
//在Firefox3中结果是"object";

2、Firefox2
对于正则表达式,在该浏览器中返回的结果是“function”(在Firefox3中结果是“object”),如:
var reg = /test/; 
alert(typeof reg); 
//在Firefox2中结果是"function"; 
//在Firefox3中结果是"object";

注:本人在safari中测试,其结果也是“function”。
3、IE6和IE7
在IE中对DOM元素使用typeof方法,得到的结果是“object”。如:
alert(typeof document.getElementsByTagName("body")[0].getAttribute); 
//结果是"object"

4、Safari 3
safari认为DOM元素的NodeList是一个函数,如:
alert(typeof document.body.childNodes); 
//结果是"function"

很明显,如果你要测试一个对象是否为函数,使用typeof方法并不能从真正意义上保证测试结果。那么,我们就需要一种在所有浏览器中都能保证测试结果的解决方案。我们知道function本身有apply()和call()两种方法,但这两个方法在IE中存在问题的函数中并不存在,试试下面的测试:
alert(typeof document.getElementsByTagName("body")[0].getAttribute.call) 
//在IE中结果是"undefined"

显然,我们不能利用这两个方法。

二、完美解决方案及实现过程
John Resig为我们提供了一个完美的解决方案,这个复杂但很稳定的判断一个对象是否为函数的方法如下:

function isFunction( fn ) { 
return !!fn && !fn.nodeName && fn.constructor != String && 
fn.constructor != RegExp && fn.constructor != Array && 
/function/i.test( fn + "" ); 
}

这个函数首先保证测试的对象存在,并将其序列化成含有“function”的字符串,这个是我们检测的基础(fn.constructor != String,fn.constructor != Array, and fn.constructor != RegExp)。另外,我们需要保证声明的函数不是一个DOM节点(fn.nodeName)。然后,我们就可以作toString测试。如果我们将一个函数转换成字符串,在一个浏览器中(fn+"")给我们的结果就像这样“function name(){...}”。现在,判断它是否为函数就很简单,仅仅只需要判断字符串中是否包含单词“function”。这很神奇,对于任何有问题的函数,在所有浏览器中都能得到我们所需要的结果。这个函数较之于传统的方法,运行速度有些不尽人意,作者建议我们保守使用。

John Resig 是jQuery库的开发者,相信使用该库的朋友们对该库简洁的语法和优秀的性能并不陌生。作者除追求代码简洁和性能高效之外,其尽善尽美的精神也让人叹服。如果你是一个完美主义者,相信此文对你很有帮助。

Javascript 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 #Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 #Javascript
JavaScript 继承详解 第一篇
Aug 30 #Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 #Javascript
用cssText批量修改样式
Aug 29 #Javascript
javascript appendChild,innerHTML,join性能比较代码
Aug 29 #Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 #Javascript
You might like
PHP+DBM的同学录程序(2)
2006/10/09 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
js闭包学习心得总结
2018/04/17 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
python设置环境变量的作用和实例
2019/07/09 Python
django+echart数据动态显示的例子
2019/08/12 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
银行员工职业规划范文
2014/01/21 职场文书
十八大闭幕感言
2014/01/22 职场文书
敬老月活动总结
2014/08/28 职场文书
党员批评与自我批评发言
2014/10/02 职场文书