Zepto源码分析（1）——类型判断函数

本文主要分析Zepto库的类型判断函数typeof，使用Zepto版本为 V.1.6.7。

先来看Zepto中对typeof()函数的实现

    var $,
        class2type={},
        toString = class2type.toString
    //判断obj的类型,返回类型字符串 null | undefined | string | number | boolean | object | function | array | regexp | date | error
    function type(obj){
        return obj == null ? String(obj):class2type[toString.call(obj)] || 'object';
    }
    function likeArray(obj){ return typeof(obj.length) == 'number'}//判断是不是数组类似对象
    $.each = function(elements, callback) {
        var i,key;
        if(likeArray(elements)){//遍历数组类似对象
            for(i=0;i<elements.length;i++){
                if(callback.call(elements[i],i,elements[i]) === false) return elements
            }
        }else{//遍历对象的每一个键
            for(key in elements)
                if(callback.call(elements[key],key,elements[key]) === false) return elements
        }
        return elements
    }
    //将类型存储入class2type中
    $.each("Boolean Number String Function Object Array Date RegExp Error".split(" "),function(i,name){
        class2type["[object " + name + "]"] = name.toLowerCase();
    })

首先定义了class2type对象，并赋值toString=class2type.toString，实际上toString引用了Object.prototype.toString.

Object.prototype.toString(obj)时object的基础方法，其功能为返回对象的字符串表示，可参考如下代码

        function Person(name,age,sex){
            this.name = name;
            this.age = age;
            this .sex = sex;
        }
        var p = new Person("Jack",21,"male");

        var class2type = {}, toString = class2type.toString;
        console.log(toString.call(p))
        console.log(toString.call(Person))
        console.log(toString.call("hello world"))
        console.log(toString.call(true))
        console.log(toString.call(new Array()))
        console.log(toString.call(null))
        console.log(toString.call(1))
        console.log(toString.call(undefined))
        console.log(toString.call(/^d{3}$/))
        console.log(toString.call(new Date()))
        console.log(toString.call(new Error()))

其返回值为

[object Object]
[object Function]
[object String]
[object Boolean]
[object Array]
[object Null]
[object Number]
[object Undefined]
[object RegExp]
[object Date]
[object Error]

能够看到对于 对象,函数,字符串,布尔值,数组,空类型,数字,未定义,正则表达式,日期,错误，Object.prototype.toString()方法都能返回相应的字符串[object Type]

Zepto实现了$.each()方法，用于遍历数组和对象，并对其元素执行定义好的回调函数(使用jquery和zepto的童靴对这个应该都熟)

$.each(obj)方法的实现思路很简单，若是参数obj存在length属性，那么判断其为数组，进行遍历并调用回调函数，若回调函数返回false，那么终止后续遍历。若是参数obj无length属性，判断其为object，并使用for...in遍历

    $.each("Boolean Number String Function Object Array Date RegExp Error".split(" "),function(i,name){
        class2type["[object " + name + "]"] = name.toLowerCase();
    })

上述函数在class2type对象上构建了各个类型的映射，class2type的值为

   {
    [object Array]:"array"，
    [object Boolean]:"boolean"    ，
    [object Date]:"date"    ，
    [object Error]:"error"，    
    [object Function]:"function"    ，
    [object Number]:"number"    ，
    [object Object]:"object"    ，
    [object RegExp]:"regexp"    ，
    [object String]:"string"
  }

能够看到class2type对象中未存储[object Null]和[object Undefined]，因此在type()函数中首先使用obj==null判断了是不是null或者undefined,

若是obj==null为true，使用String(null)和String(undefined)分别返回null和undefined

若是obj==null为false, 使用class2type(toString().call(obj))返回class2type中存储的属性值

string | number | boolean | object | function | array | regexp | date | error

若是class2type中查找不到的类型，那么判断其为object类型。

综上所述，Zepto的type()方法可以识别

null | undefined | string | number | boolean | object | function | array | regexp | date | error

共计11种类型。

对比javascript提供的typeof只能识别 number | string | boolean | object | undefined | function 六种类型。

以上！