01. 你真的了解JS中的数据类型检测吗？

小鱼儿 2022-09-10 09:23 169阅读 0赞

### 谈谈对js数据类型转化的看法 ###

#### 转化类型的方法有 ####

*  typeof 底层是二进制
    
     *  直接在计算机底层基于数据类型的值(二进制)进行检测
     *  typeof null == “object”
        
        > null的在计算机存储的二进制 000 ，对象储存在计算机中都是以000开头的二进制存储，null也是，所以检测出来结果是’object’
     *  typeof 普通对象/数组对象/正则对象/日期对象 都是 “object”
 *  instanceof 检测当前实例是否属于这个类的
    
     *  底层机制：只要当前类出现在实例的原型链上，结果都是true
     *  由于我们可以肆意的修改原型的执行
     *  不能检测基本数据类型
     *  instanceof 为了解决 `typeof 普通对象Object/数组对象Array/正则对象RegExp/日期对象Date 都是 'object'` 这个问题的不足的
        
            let arr = [];
            console.log(arr instanceof Array)  // true
            console.log(arr instanceof String) // false
            console.log(arr instanceof String) // false
            console.log(arr instanceof Object) // true arr的原型链上有Oject所以为true
            
            function Fn(){ 
                this.x = 100;
            }
            Fn.prototype = Object.create(Array.prototype)
            let f = new Fn;
            console.log(f instanceof Array) // true 有漏洞
            console.log(1 instanceof Number) // false 不能检测基本数据类型
        
            function instance_Of(example, classFunc) { 
                let classFuncPrototype = classFunc.prototype;
                let proto = Object.getPrototypeOf(example);
            
                while (true) { 
                    if (proto === null) { 
                        return false;
                    }
                    if (proto == classFuncPrototype) { 
                        return true;
                    }
                }
                proto = Object.getPrototypeOf(proto);
            }
            let arr = []
            console.log(instance_Of(arr, Array));
            console.log(instance_Of(arr, Object));
            console.log(instance_Of(arr, RegExp));
 *  constructor
    
        let arr = []
        console.log(arr.constructor === Array);
        console.log(arr.constructor === RegExp);
        console.log(arr.constructor === Object);
        
        let n = 1;
        console.log(n.constructor === Number); // true
 *  Object.prototype.toString.call
    
        let obj ={ name:'zs'}
        // obj.toString(); =>"[object Object]"
    
     *  toString方法执行，this是obj，所以检测是obj它的所属类信息
        
         *  推测：是不是只要把Object.prorotype.toString 执行，让它里面的this变为要检测的值，那就能返回当前所属类的信息
         *  标准检测数据类型的方法：Object.prorotypp.toString() 不是转转化为字符串，是返回当前实例为所属类的信息
        
            Object.prototype.toString.call(1)
            '[object Number]'
            Object.prototype.toString.call('1')
            '[object String]'
            Object.prototype.toString.call({ })
            '[object Object]'
            Object.prototype.toString.call([])
            '[object Array]'
            Object.prototype.toString.call(function(){ })
            '[object Function]'
            
            
            let list = ['Boolean', 'Number', 'String', 'Date', 'Function', 'Array', 'Object', 'RegExp', 'Error', 'Symbol']
            let classtype = { }
            list.forEach((res) => { 
                classtype[`[object ${ res}]`] = res.toLowerCase();
            })
            
            function toType(res) { 
                if (res == null || res == undefined) { 
                    return res + ''
                }
                return typeof res === 'object' || typeof res === 'function' ? classtype[toString.call(res)] || 'object' :
                    typeof res
            }
            console.log(toType(1));
            console.log(toType('1'));
            console.log(toType([]));
            console.log(toType({ }));
        
         *  封装检测数据类型
        
            真实项目中想使用：
            
            (function () { 
                let list = ['Boolean', 'Number', 'String', 'Date', 'Function', 'Array', 'Object', 'RegExp', 'Error', 'Symbol' ]
                let classtype = { } 
                list.forEach((res) => { 
                    classtype[`[object ${ res}]`] = res.toLowerCase();
                })
            
                function toType(res) { 
                    if (res == null || res == undefined) { 
                        return res + ''
                    }
                    return typeof res === 'object' || typeof res === 'function' ? classtype[toString.call(res)] ||
                        'object' :
                        typeof res
                }
                window.toType = toType
            })()