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 相关文章推荐
jquery ajax修改全局变量示例代码
Nov 08 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
jQuery常用选择器详解
Jul 17 jQuery
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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冒泡排序算法的深入理解
2013/06/09 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
js树形控件脚本代码
2008/07/24 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
javascript操作cookie
2017/01/17 Javascript
canvas时钟效果
2017/02/16 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Python最基本的输入输出详解
2015/04/25 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
初中生学习的自我评价
2013/11/14 职场文书
运动会解说词50字
2014/01/18 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
公证书样本
2014/04/10 职场文书
大专生找工作自荐书
2014/06/10 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
文明单位申报材料
2014/12/23 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
护理工作心得体会
2016/01/22 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
DSP接收机前端设想
2022/04/05 无线电