浅谈jQuery源码中的toType检测方法 重构toType检测方法

在日常开发过程中 会经常使用到类型检测 为提高其开发效率 封装一个类型检测方法 不香吗?
在封装之前 需先了解JS中的数据类型检测 四种方案及优缺点:

/*
 * 数据类型检测:
 *   + typeof
 *     + 直接在计算机底层基于数据类型的值(二进制)进行检测
 *     + tyepof null  "object"  对象存储在计算机中,都是以000开始的二进制存储,null也是,所以检测出来的结果是对象
 *     + typeof 普通对象/数组对象/正则对象/日期对象  "object"
 * 
 *   + instanceof  检测当前实例是否属于这个类的
 *     + 底层机制:只要当前类出现在实例的原型链上,结果都是true
 *     + 由于我们可以肆意的修改原型的指向,所以检测出来的结果是不准的
 *     + 不能检测基本数据类型
 * 
 *   + constructor
 *     + 用起来看似比instanceof还好用一些(基本类型支持的)
 *     + constructor可以随便改,所以也不准
 * 
 *   + Object.prototype.toString.call([value]) 
 *     + 标准检测数据类型的办法:Object.prototype.toString不是转换为字符串,是返回当前实例所属类的信息
 *     + 标准检测的办法 "[object Number/String/Boolean/Null/Undefined/Symbol/Object/Array/RegExp/Date/Function]"
 */

jQuery中的toType:
在这里插入图片描述
废话不多说 直接上代码:

(function () {
    var class2type = {};
    var toString = class2type.toString; //=>Object.prototype.toString

    // 设定数据类型的映射表
    ["Boolean", "Number", "String", "Function", "Array", "Date", "RegExp", "Object", "Error", "Symbol"].forEach(name => {
        class2type[`[object ${name}]`] = name.toLowerCase();
    });

    function toType(obj) {
        if (obj == null) {
            // 传递的值是null或者undefined,就返回对应的字符串
            return obj + "";
        }
        // 基本数据类型都采用typeof检测
        return typeof obj === "object" || typeof obj === "function" ?
            class2type[toString.call(obj)] || "object" :
            typeof obj;
    }

    window.toType = toType;
})();

使用测试
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/oQieBaoChaYinZuo/article/details/107913151
今日推荐