javascript判断专题

偏执的太偏执、 2022-04-17 07:11 171阅读 0赞

javascript有数组，对象，函数，字符串，布尔，还有Symbol，set，map，weakset，weakmap。

判断这些东西也是有很多坑，像原生的typeof，instanceOf有一些bug，有些能满足90%的情况，也有些不太如人意。

所以各大类库都出了一些判断的函数，以is开头的xxx。

1，判断null  
typeof null//‘object’，所以不能用typeof判断。typeof的一个坑。

null大家都是用 null===null判断的。jquery阿underscore都是这么写：

function isNull(obj){return obj===null}

2.undefined

typeof undefined===“undefined”,还不能直接写undefined，而jq等类库和underscore都是这么写的：

function isUndefined(obj){return obj===void 0;}

3.NaN

typeof NaN===“number”,js内置的isNaN在输入字符串，对象都返回true，白瞎这个名字了，不过倒是有人用这个判断数字，!isNaN(number)。所以判断NaN的时候是：

function isNaN(obj){return obj!==obj}

jquery，underscore等类库也都是这么判断，看来大家意见差不多。  
3.window对象  
jquery的判断window对象

//判断window
    function isWindow(){
        window==document//IE678 true
        document==window//IE678 false
    }

3.判断基础类型Number，boolean，function，string。

//typeof判断string,number,boolean,function可满足90%的需求
    //但是。。。
    typeof new Boolean(1);//"object"
    typeof new Number(1);//"object"
    typeof new String(1);//"object"

这些要判断也蛮简单的，上一下underscore的源码吧。

\_.isFunction / \_.isString / \_.isNumber / \_.isDate / \_.isRegExp都是这样。。用Object.prototype.toString.call(obj)判断  
刚刚试了下，Object.toString.call和原型链上的toString返回的不一样-0-。

_.isFunction = function(obj) {
        return Object.protorype.toString.call(obj) == '[object Function]';
    };

underscore的boolean的判断还是蛮全的，包括字面量，对象形式的boolean：

_.isBoolean = function(obj) {
        return obj === true || obj === false || toString.call(obj) == '[object Boolean]';
    };

4.object  
typeof 太多东西都是object了，看看underscore咋判断

_.isObject = function(obj) {
        return obj === Object(obj);
    };

5.element

_.isElement = function(obj) {
        return !!(obj && obj.nodeType == 1);
    };

6.Arguments  
这是underscore的判断Arguments，和源码，注释很清楚也不多说。

_.isArguments = function(obj) {
        return toString.call(obj) == '[object Arguments]';
    };
    // 验证isArguments函数, 如果运行环境无法正常验证arguments类型的数据, 则重新定义isArguments方法
    if(!_.isArguments(arguments)) {
        // 对于环境无法通过toString验证arguments类型的, 则通过调用arguments独有的callee方法来进行验证
        _.isArguments = function(obj) {
            // callee是arguments的一个属性, 指向对arguments所属函数自身的引用
            return !!(obj && _.has(obj, 'callee'));
        };
    }

7.Array

判断数组是最麻烦的，前面的还好，数组默认的0，1，2，3的下标，一个length属性，一些Array方法，判断的时候还要保证obj不是类数组，还要保证不是Arguments。。  
我们看一下这些类库探索Array的路程  
开始是

return arr.instanceof Array;

后来

return !!arr&&arr.constructor==Array;
    return typeof arr.sort=='function'
    return try{
        Array.prototype.toString.call(o);
        return true;
    }catch(e){
        return false;
    }

从instanceof判断，constructor的判断到Array的toString方法的判断，可谓是用尽心思，最新版的jquery的判断array好像把这好多方法集合在一起，写的老长。

underscore的判断还是用它的toString.call判断：

_.isArray = nativeIsArray ||
    function(obj) {
        return toString.call(obj) == '[object Array]';
    };

如果js原生支持isArray就先用原生的，这个nativeIsArray在一开始被设置为Array的isArray方法。

各大框架也有类数组的判断，这个更麻烦，老长的代码，判断原理是类数组的length属性能被重写，而数组的length属性不能被重新，代码就不贴了。

8.iframe

//判断页面是否在iframe
    function(){
        alert(window!=window.top)
        alert(window.frameElement!==null)
        alert(window.eval!==top.eval)
    }
    复制代码
    //判断iframe与父页面同源
    function isSameOrigin(el){
        var ret=false;
        try{
            ret=!!el.contentWindow.location.href;
    
        }catch(e){}
        return ret;
    }

iframe的函数

//取iframe的对象
    function getIframeDocument(node){
        return node.contentDocument||node.contentWindow.document
    }

总结一下原生判断

//typeof 的陷阱
    typeof null//'object'
    typeof []//object
    typeof document.childNodes //safari "function"
    typeof document.createElement('embed')//ff3-10 "function"
    typeof document.createElement('object')//ff3-10 "function"
    typeof document.createElement('applet')//ff3-10 "function"
    typeof /\d/i
    typeof window.alert //IE678 "object"
    //instanceof不能跨文档比较 iframe里面的数组实例不是父窗口的Array实例
    instanceof
    //contructor的陷阱 
    //旧版本ie下dom bom对象的constructor属性没有暴露出来