jquery源碼之屬性判斷-$.type類型

今天我突然想看一下jquery裏面如何來判斷一個數據類型是否爲Array,發現裏面代碼爲:

isArray: Array.isArray || function( obj ) {
return jQuery.type(obj) === "array";
},

我們知道原生javascript判斷是否爲Array類型的方法是:

Array.isArray=function(arg){

    return Array.isArray||Object.prototype.toString.call(arg) === '[object Array]';
  };
}其中或符號前面爲ECMAScript 5中的新方法,後面是兼容IE9以下瀏覽器的老方法。
那麼和jquery中的代碼比較我們發現其中的type應該要起到我們原生javascript代碼||後面判斷式的作用。
而jquery源碼中type的實現有以下幾行:見截圖:
那麼這一段代碼是什麼意思呢?放在一起其實我們不難看懂,其中classType相當於一個對象,它相當於:
var class2type = {    '[object Boolean]': 'boolean',    '[object Number]': 'number',    '[object String]': 'string',    '[object Function]': 'function',    '[object Undefined]': 'undefined',    '[object Null]': 'null',    '[object Array]': 'array',    '[object Date]': 'date',    '[object RegExp]': 'regexp',    '[object Object]': 'object',    '[object Error]': 'error'};
但是源代碼採用截圖方式而不採用我們上述對象直接聲明的方式是因爲這個對象裏面全部是字符串,沒有辦法進行壓縮。
而type方法中的return則是一個三元表達式,正如我們在原生javascript所認識的那樣,當obj不是object或者function時,我們則直接利用typeof判斷obj即可,當obj是object類型時,我們則需利用
Object.prototype.toString.call(arg)來細緻判斷obj的類型。在這裏則轉換成對象對應索引是否存在相應value,若存在則返回value判斷,若不存在則返回object類型。
那麼這個和我們原生的javascript存在什麼區別呢?爲什麼要這麼複雜利用class2Type.其中在於html新建元素上,譬如document.createElement("div")我們用typeof判斷返回的是object,若按我們正常想法我們還需利用
Object.prototype.toString.call(arg)來細緻判斷obj的類型,但此時因爲div是dom類型,所以實際上返回object htmldivElement類型,則並不是我們所需要的object,所以我們希望只是classtype裏的這幾個類型時,我們返回對應的具體類型,如果不存在我們返回總的object類型。
其中jquery代碼異常簡潔而且在很多方面都有作者細緻而獨特的想法,大家抽空可以看一下。
typeof方法詳解博客早前一篇文章。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章