js-类型检测

时间:2021-07-26 16:24:38   收藏:0   阅读:0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script> 
        /* JQ中关于数据类型检测的源码 */
        var getProto = Object.getPrototypeOf; //获取实例的原型对象
        var class2type = {};
        var toString = class2type.toString; //Object.prototype.toString 检测数据类型
        var hasOwn = class2type.hasOwnProperty; //Object.prototype.hasOwnProperty
        var fnToString = hasOwn.toString; //Function.prototype.toString 把函数转换字符串
        var ObjectFunctionString = fnToString.call(Object); //"function Object() { [native code] }"

        // 循环数据中的每一项:建立数据类型检测的映射表
        //  + [object Boolean]/[object Number]/[object String]都是为了处理基于”构造函数“创建的基本数据值的引用类型值,最后期许检测出来的结果依然是"boolean"/"number"/"string"
        //  typeof new Number(10) -> "object"
        //  toString.call(new Number(10)) -> "[object Number]"
        [
            "Boolean",
            "Number",
            "String",
            "Symbol",
            "Function",
            "Array",
            "Date",
            "RegExp",
            "Object",
            "Error",
            "GeneratorFunction"
        ].forEach(function (name) {
            class2type["[object " + name + "]"] = name.toLowerCase();
        });

        // 检测数据类型的公共方法
        function toType(obj) {
            // null/undefined
            if (obj == null) {
                return obj + "";
            }
            // 如果是引用数据类型(包含:new Number(10)这种),则基于Object.prototype.toString来检测(拿检测的结果到之前建立的映射表中去匹配查找,找到对象的小写数据类型);而基本数据类型,之前排除了null/undefined,剩下的基于typeof即可解决!
            return typeof obj === "object" || typeof obj === "function" ?
                class2type[toString.call(obj)] || "object" :
                typeof obj;
        }
 
        // console.log(toType(‘obj‘));  // string
        // console.log(toType(1123));  // number
        // console.log(toType({1:2})); // object
        // console.log(toType([1,3])); // array
        // console.log(toType(function(){})); // function
        // console.log(toType(null)); // null
        // console.log(toType(undefined));  // undefined
        // console.log(toType(true));  // boolean

        // 检测是否为一个函数
        var isFunction = function isFunction(obj) {
            // Support: Chrome <=57, Firefox <=52
            // In some browsers, typeof returns "function" for HTML <object> elements
            // (i.e., `typeof document.createElement( "object" ) === "function"`).
            // We don‘t want to classify *any* DOM node as a function.
            return typeof obj === "function" && typeof obj.nodeType !== "number";
        };

        // 检测是否为window
        var isWindow = function isWindow(obj) {
            // window.window===window 所有符合这个特点的对象就是浏览器的window对象
            // null/undefined无法进行成员访问
            return obj != null && obj === obj.window;
        };

        // 检测是否为数组或者类数组
        function isArrayLike(obj) {
            // length:要不然是false(不存在或者没有length属性),要不然是length的属性值
            // type:检测出来的数据类型
            var length = !!obj && "length" in obj && obj.length,
                type = toType(obj);

            // 如果是函数或者window直接返回false,因为:函数或者window也都有length属性
            if (isFunction(obj) || isWindow(obj)) {
                return false;
            }

            // type === "array" -> 数组
            // length === 0 -> 有length属性,值是零「空的类数组」
            // typeof length === "number" && length > 0 -> length属性值大于零(非空类数组)
            // (length - 1) in obj -> 最大索引也存在,我们认为其是按照索引递增的(不一定准确)
            return type === "array" || length === 0 ||
                typeof length === "number" && length > 0 && (length - 1) in obj;
        }

        // 检测是否为一个纯粹的对象 => {}  数组对象/正则对象等都不算
        function isPlainObject(obj) {
            var proto,
                Ctor,
                type = toType(obj);

            // 不存在或者检测数据类型的结果都不是object,那么一定不是纯粹的对象
            if (!obj || type !== "object") {
                return false;
            }

            // 不存在原型的情况:Object.create(null)
            proto = getProto(obj);
            if (!proto) {
                return true;
            }

            // 获取当前值原型对象上的constructor「获取它的构造函数」
            Ctor = hasOwn.call(proto, "constructor") && proto.constructor;

            // 有构造函数,并且构造函数需要直接是Object才可以:排除了NodeList/自定类的实例等内容,只有它的原型直接是Object.prototype的才可以  => ObjectFunctionString===fnToString.call(Object)
            return typeof Ctor === "function" && fnToString.call(Ctor) === ObjectFunctionString;
        }

        // 检测是否为一个空对象
        // function isEmptyObject(obj) {
        //     var name;
        //     // for in遍历的时候,可以遍历到自己在内置类原型上扩展的方法
        //     // 并且它无法遍历Symbol的属性值
        //     for (name in obj) {
        //         return false;
        //     }
        //     return true;
        // }  
        // Object.prototype.AA = 100;
        // let obj = {};
        // console.log(isEmptyObject(obj)); //false

        // let obj = {
        //     [Symbol()]: 100
        // };
        // console.log(isEmptyObject(obj)); //true

        function isEmptyObject(obj) {
            var keys = [
                ...Object.getOwnPropertyNames(obj),
                ...Object.getOwnPropertySymbols(obj)
            ];
            return keys.length === 0;
        }
        Object.prototype.AA = 100;
        let obj = {};
        console.log(isEmptyObject(obj)); //true

        obj = {
            [Symbol()]: 100
        };
        console.log(isEmptyObject(obj)); //false
 
    </script>
</body>
</html>
评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!