jQuery源码(数据类型检测的处理)

139 阅读2分钟

1、第一部分

 "use strict"; //浏览器的严格模式
    var class2type = {}; //设置一个空对象
    var getProto = Object.getPrototypeOf; 获取__proto__的方法
    var toString = class2type.toString; //->Object.prototype.toString
    var hasOwn = class2type.hasOwnProperty; //->Object.prototype.hasOwnProperty
    var fnToString = hasOwn.toString; //->Function.prototype.toString :函数的toString方法
    var ObjectFunctionString = fnToString.call(Object); //->Object.toString()  //->"function Object() { [native code] }"
    

2、检测是否为函数

var isFunction = function isFunction(obj) {
    // In some browsers, typeof returns "function" for HTML <object> elements
    // (i.e., `typeof document.createElement( "object" ) === "function"`).
    return typeof obj === "function" && typeof obj.nodeType !== "number";
};

3、 检测是否为window

var isWindow = function isWindow(obj) {
    return obj != null && obj === obj.window;
};

4、检测数据类型

// 建立数据类型检测的映射表
var arr_type = ["Boolean", "Number", "String", "Function", "Array", "Date", "RegExp", "Object", "Error", "Symbol", "BigInt"];
arr_type.forEach(function (name) {
    class2type["[object " + name + "]"] = name.toLowerCase();
});

// 通用检测方法
        
//如果是引用类型的,那么我们要让其返回映射对应的小写形式;如果我们映射机制表里面没有,那么我们就让它返回Object;这样能够保证我们可以进行自定义;
    如果是原始值类型我们就直接返回typeof之后的结果即可;因为typeof直达计算机底层;而且如果是对象类型的基本类型值,我们也可以返回其对应的原始值类型
    
var toType = function toType(obj) {
    if (obj == null) return obj + ""; //考虑null或者undefined的情况
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[toString.call(obj)] || "object" : typeof obj;
};

5、检测是不是数组或者类数组

// 检测是否为数组或者类数组
var isArrayLike = function isArrayLike(obj) {
    var length = !!obj && "length" in obj && obj.length,
        type = toType(obj);
    if (isFunction(obj) || isWindow(obj)) return false;
    return type === "array" || length === 0 ||
        typeof length === "number" && length > 0 && (length - 1) in obj;
};

6、检测是否为纯对象

// 检测是否为纯粹的对象(obj.__proto__===Object.prototype)
var isPlainObject = function isPlainObject(obj) {
    var proto, Ctor;
    if (!obj || toString.call(obj) !== "[object Object]") return false;
    proto = getProto(obj);
    if (!proto) return true; // Object.create(null)
    Ctor = hasOwn.call(proto, "constructor") && proto.constructor;
    return typeof Ctor === "function" && fnToString.call(Ctor) === ObjectFunctionString;
};

7、检测是不是空对象

// 检测当前对象是否为空对象
var isEmptyObject = function isEmptyObject(obj) {
    if (obj == null) return false;
    var keys = Object.keys(obj);
    if (typeof Symbol !== "undefined") keys = keys.concat(Object.getOwnPropertySymbols(obj));
    return keys.length === 0;
};

8、检测是否为有效数字

// 检测是否为有效数字,认为:10和"10"都是有效数字,但是true/null这些都不是
var isNumeric = function isNumeric(obj) {
    var type = toType(obj);
    return (type === "number" || type === "string") && !isNaN(obj);
};

注意: isNaN()我们可以进行检测是不是数字