Javascript 判斷函數類型完美解決方案

2019-11-21 01:10:28

字體：大中小

來源：轉載

供稿：網友

但是，有一些細節并不為我們所熟知。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庫的開發者，相信使用該庫的朋友們對該庫簡潔的語法和優秀的性能并不陌生。作者除追求代碼簡潔和性能高效之外，其盡善盡美的精神也讓人嘆服。如果你是一個完美主義者，相信此文對你很有幫助。

上一篇：獲取URL地址中的文件名和參數的javascript代碼

下一篇：javascript 控制 html元素顯示/隱藏實現代碼