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

但是，有一些细节并不为我们所熟知。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库的开发者，相信使用该库的朋友们对该库简洁的语法和优秀的性能并不陌生。作者除追求代码简洁和性能高效之外，其尽善尽美的精神也让人叹服。如果你是一个完美主义者，相信此文对你很有帮助。

赞 (0)

相关推荐

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

    但是,有一些细节并不为我们所熟知.John Resig 在分析了这些细节之后,为我们提供了一个完美的解决方案,本文将作详细介绍: 一.传统方法不为人所知的细节 毫无疑问,在判断函数类型时,我们使用的是typeof方法,比如: 复制代码 代码如下: function fn(){ //content } alert(typeof fn)//结果是"function". 但是,该方法在一些浏览器中并不是像我们想像的那样工作. 1.Firefox2和Firefox3 在这两个浏览器中,用typ

  • JavaScript 判断浏览器类型及版本

    几天前,浏览器家族有刚诞生了一位小王子,就是Google推出的Chrome浏览器.由于Chrome出生名门,尽管他还是个小家伙,没有人敢小看他.以后,咱们常说浏览器的"四大才子"就得改称为"五朵金花"了. 在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子.浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本. JavaScript是前端开发的主要语言,我们可以通过编写J

  • JavaScript判断浏览器类型的方法

    本文实例讲述了JavaScript判断浏览器类型的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript"> var Sys = {}; var ua = navigator.userAgent.toLowerCase(); alert(ua); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1]: (s = ua.match(/firefox\/([\d.]+)/

  • 利用JavaScript判断浏览器类型及版本

    利用JavaScript判断浏览器类型及版本

    本文将介绍如何使用Javascript来检测浏览器的类型以及版本号,包括猎豹浏览器.搜狗浏览器.傲游浏览器.360极速浏览器.360安全浏览器.QQ浏览器.百度浏览器.IE,Firefox,Chrome,safari,Opera等. 效果图 实例代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

  • javascript function(函数类型)使用与注意事项小结

    本文实例讲述了javascript function(函数类型)使用与注意事项.分享给大家供大家参考,具体如下: 在ECMAScript中,Function(函数)类型实际上是对象.每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象的指针. 学习要点: 1.函数的声明方式 2.作为值的函数 3.函数的内部属性 4.函数属性和方法 一．函数的声明方式 1.普通的函数声明 function box(num1, num2

  • 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性

    在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性,比如:我们有一个网站, 在Windows XP下浏览效果良好,但是到了Ubuntu下,由于许多特性不同,会造成在浏览上的细微差异,甚至会影响到良好的用户体验.这个时候我们就需要利用 Javascript对操作系统的类型以及某些特性进行判断,分而治之,从而实现网站在跨平台浏览时候保持良好的用户体验. 下边的代码实现对Windows.Mac.Linux.Unix擦作系统的判断: 复制代

  • JavaScript Function函数类型介绍

    // 在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例;而且都与其他引用类型一样具有属性和方法; // 由于函数是对象,因此函数名实际上也是一个指向函数对象的指针; 一 函数的声明方式 1.函数声明方式 function box(num1,num2){ return num1+num2; } 2.函数表达式定义函数 var box = function(num1,num2){ // 通过变量box即可引用函数; return num1+num2; };

  • JavaScript判断数组类型的方法

    前言 JavaScript中关于数组的判定问题,一直都是一个必须要掌握的点,那么,运用知识,如何判断一个类型是数组,就需要有对JavaScript使用有着深入的了解. 判断方法 一.Array.isArray ES5新增的数组方法,Array.isArray应该是我们最先想到的判定方式,现在应用的也比较广泛. const arr = [1,2,3,4] Array.isArray(arr) // true 如果是在支持ES5的浏览器中,用这样的方式自然没什么问题,但是如果是在IE9以下版本,这个

  • 常用一些Javascript判断函数

    1.<DIV id=div1><h1>This is an DIV</h1></div> <button onclick=alert(div1.outerHTML)>outerHTML</button> <button onclick=alert(div1.innerHTML)>innerHTML</button> <button onclick=alert(div1.innerText)>inne

  • JavaScript判断undefined类型的正确方法

    复制代码 代码如下: if (reValue== undefined){     alert("undefined");     } 发现判断不出来,最后查了下资料要用typeof 方法: 复制代码 代码如下: if (typeof(reValue) == "undefined") {    alert("undefined"); } typeof 返回的是字符串,有六种可能:"number"."string&quo

随机推荐