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 相关文章推荐
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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对数组排序代码分享
2014/02/24 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
node.js的事件机制
2017/02/08 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
夯基础之手撕javascript继承详解
2020/11/09 Javascript
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
django 类视图的使用方法详解
2019/07/24 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
应届大学生自荐信格式
2013/09/21 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
省文明单位申报材料
2014/05/08 职场文书
仲裁协议书
2014/09/26 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015年体育部工作总结
2015/04/02 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js