jQuery中isFunction方法的BUG修復(fù)

更新時(shí)間：2010年01月25日 20:21:28 作者：

修復(fù) jQuery 中 isFunction 方法的 BUG

jQuery 1.4 源碼 449 行（core.js 431 行），判斷是否為函數(shù)的方法如下（思路來源于 Douglas Crockford 的《The Miller Device》）：

isFunction: function( obj ) {
    return toString.call(obj) === "[object Function]";
},

同時(shí) jQuery 的作者也作了部分注釋：

See test/unit/core.js for details concerning isFunction. Since version 1.3, DOM methods and functions like alert aren't supported. They return false on IE (#2968).

即：此方法在 IE 下無法正確識別 DOM 方法和一些函數(shù)（例如 alert 方法等）。

為什么會這樣呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>修復(fù) jQuery 中 isFunction 方法的 BUG</title> </head> <body> <h3>使用 typeof 運(yùn)算符檢測各種方法：</h3> <script> document.writeln('typeof eval: ' + typeof eval + '<br>'); document.writeln('typeof confirm: ' + typeof confirm + '<br>'); document.writeln('typeof confirm: ' + typeof window.open + '<br>'); document.writeln('typeof alert: ' + typeof alert + '<br>'); document.writeln('typeof window.alert: ' + typeof window.alert + '<br>'); document.writeln('typeof document.getElementById: ' + typeof document.getElementById + '<br>'); document.writeln('typeof document.createElement: ' + typeof document.createElement + '<br>'); </script> <h3>測試原始的 isFunction 函數(shù)方法</h3> <script> var isFunction = function( fn, name ) { return document.writeln('isFunction(' + name + '): ' + (Object.prototype.toString.call(fn) === "[object Function]") + '<br>'); } isFunction(eval,'eval'); isFunction(confirm, 'confirm'); isFunction(window.open, 'window.open'); isFunction(alert, 'alert'); isFunction(window.alert, 'window.alert'); isFunction(document.getElementById, 'document.getElementById'); isFunction(document.createElement, 'document.createElement'); isFunction(isFunction, 'isFunction'); </script> <h3>測試修復(fù)后 isFunction 函數(shù)方法</h3> <script> var isFunction = (function() { return typeof document.getElementById === "object" ? isFunction = function(fn, name){ try { return document.writeln('isFunction(' + name + '): ' + (/^\s*\bfunction\b/.test("" + fn)) + '<br>'); } catch (x) { return document.writeln('isFunction(' + name + '): ' + (false) + '<br>'); } }: isFunction = function(fn, name){ return document.writeln('isFunction(' + name + '): ' + ("[object Function]" === Object.prototype.toString.call(fn)) + '<br>'); }; })() isFunction(eval,'eval'); isFunction(confirm, 'confirm'); isFunction(window.open, 'window.open'); isFunction(alert, 'alert'); isFunction(window.alert, 'window.alert'); isFunction(document.getElementById, 'document.getElementById'); isFunction(document.createElement, 'document.createElement'); isFunction(isFunction, 'isFunction'); </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

會發(fā)現(xiàn)在 IE 下用 typeof 檢測 alert、confirm 方法以及 DOM 的方法顯示 object，而其他瀏覽器下顯示 function。

那如何完善這個(gè)問題呢？

typeof 檢測某個(gè)方法（例如：document.getElementById）是否是 object，如何是，則重寫 isFunction 函數(shù)；
怎樣重寫呢？正則判斷傳入的對象字符串后（”" + fn），是否起始位置含有 function，即：/^\s*\bfunction\b/.test(” + fn)。

OK，看下根據(jù)以上思路修改后的 isFunction 函數(shù)：

復(fù)制代碼代碼如下:

var isFunction = (function() { // Performance optimization: Lazy Function Definition return "object" === typeof document.getElementById ? isFunction = function(fn){ try { return /^\s*\bfunction\b/.test("" + fn); } catch (x) { return false } }: isFunction = function(fn){ return "[object Function]" === Object.prototype.toString.call(fn); };})()

參考閱讀：