JS中数据类型检测的几种方法及区别

1. typeof [value]：返回一个字符串，字符串中包含了对应的数据类型
2. [实例] instanceof [构造函数]
3. [对象].constructor===[构造函数]
4. Object.prototype.toString.call([value])

一、typeof：

typeof： 返回的一个字符串，字符串包含数据类型，
原理：根据计算机底层存储的“二进制”来检测的【性能会好点】；原始值数据类型(不含null)以及函数等值的检测，基于typeof处理还是很不错的
缺点：

• typeof null ->"object"
• typeof 不能细分对象
• typeof new Number(10) ->"object"

有关代码及面试题：

 typeof typeof [] -> "string"

二、[实例] instanceof [构造函数]：

本意: 不是检测数据类型，而是检测当前实例是否属于这个类，用来检测数据类型，仅是“临时拉来当壮丁”，所以存在很多弊端「可以基于instanceof细分对象类型」

原理: 首先按照 [构造函数]Symbol.hasInstance ，如果存在这个属性方法，则方法执行返回的值就是最后检测的结果；如果不存在这个属性方法，则会查找当前[实例]的原型链（一直找到Object.prototype为止），如果查找中途，找到的某个原型等于[构造函数]的原型「即：构造函数的原型出现在其原型链上」则返回结果是true，反之false！！

缺点:

• 因为原型可以被重定向，所以检测的结果不一定准确
• 原始值类型使用instanceof是无法检测的

有关代码及面试题：

console.log([] instanceof Array); //->true
console.log([] instanceof RegExp); //->false
console.log([] instanceof Object); //->true

function Fn() {}
Fn.prototype = [];
let f = new Fn;
// 正常理解:f肯定不是数组
console.log(f instanceof Array); //->true
console.log(f instanceof Object); //->true

console.log((1) instanceof Number); //->false  这样处理不会转换
console.log((1).toFixed(2)); //->'1.00' 浏览器有一个把1转换为对象格式1的操作"Object(1)" 装箱

class Fn {
    // 基于ES6设置静态私有属性是有效的
    static[Symbol.hasInstance](value) {
        console.log(value);
        return true;
    }
}
console.log([] instanceof Fn);

重写instanceof：

function instance_of(obj, Ctor) {
    // 数据格式准确性校验
    if (Ctor == null) throw new TypeError("Right-hand side of 'instanceof' is not an object");
    if (!Ctor.prototype) throw new TypeError("Function has non-object prototype 'undefined' in instanceof check");  //没有prototype属性  比如箭头函数
    if (typeof Ctor !== "function") throw new TypeError("Right-hand side of 'instanceof' is not callable");

    // 原始类型直接忽略
    if (obj == null) return false;
    if (!/^(object|function)$/.test(typeof obj)) return false;

    // 先检测是否有 Symbol.hasInstance 这个属性
    if (typeof Ctor[Symbol.hasInstance] === "function") return Ctor[Symbol.hasInstance](obj);

    // 最后才会按照原型链进行处理
    let prototype = Object.getPrototypeOf(obj);
    while (prototype) {
        if (prototype === Ctor.prototype) return true;
        prototype = Object.getPrototypeOf(prototype);
    }
    return false;
}
let res = instance_of([12, 23], Array);
console.log(res); //=>true

三、[对象].constructor===[构造函数]

本意: 获取对象的构造函数，所以他也是“临时拉来当壮丁”，也存很多的弊端

• constructor是可以允许被肆意更改的，检测结果是不准确的

let value = [];
console.log(value.constructor === Array); //->true
console.log(value.constructor === RegExp); //->false
console.log(value.constructor === Object); //->false

value = 1;
console.log(value.constructor === Number); //->true 

四、Object.prototype.toString.call([value]) 【推荐】

原理: 首先找到Object.prototype.toString方法，把toString执行的之后，让方法中的this变为要检测的这个值，toString内部会返回对应this「也就是要检测这个值」的数据类型信息 “[object ?]”

• 补充:大部分值(实例)所属类的原型上都有toString方法,除了Object.prototype.toString是用来检测数据类型的，其余的一般都是用来转换为字符串的...
• 类型汇总：“[object Number/String/Boolean/Null/Undefined/Symbol/BigInt/Object/Array/RegExp/Date/Error/Function/GeneratorFunction/Math...]”
  +要检测“[object ?]” 中?是啥，首先看 [value][Symbol.toStringTag] ，如果存在这个属性，属性值是啥，“?”就是啥；如果没有这个属性，一般是返回所属的构造函数信息...

let class2type = {},
    toString = class2type.toString; //->Object.prototype.toString

let fn = function* () {};
console.log(toString.call(fn)); //->"[object GeneratorFunction]"
//  + fn[Symbol.toStringTag] -> "GeneratorFunction" 


function Fn() {
    this.x = 100;
}
Fn.prototype = {
    constructor: Fn,
    getX() {
        console.log(x);
    },
    // 这样所有Fn的实例(f)就拥有这个属性，后期基于toString检测类型，返回“[object Fn]”
    [Symbol.toStringTag]: 'Fn'
};
let f = new Fn;
console.log(toString.call(f)); //->"[object Fn]"  默认是“[object Object]”

image.png

封装一个工作中常用的检测数据类型的工具函数:

• 数据类型检测的“映射表”: toString.call检测的结果作为属性名，属性值是对应的数据类型「字符串&小写,类似于typeof的结果」

var   class2type = {},
      toString = class2type.toString, //->Object.prototype.toString 检测数据类型

var typeArr = ["Boolean", "Number", "String", "Function", "Array", "Date", "RegExp", "Object", "Error", "Symbol", "BigInt", "GeneratorFunction", "Set", "Map", "WeakSet", "WeakMap"];
typeArr.forEach(function (name) {
    class2type["[object " + name + "]"] = name.toLowerCase();
}); 

// 专门进行数据类型检测的办法 
var toType = function toType(obj) {
    // null&undefined直接返回对应的字符串
    // 原始值类型基于typeof检测
    // 对象类型「包含原始值的对象类型」基于toString.call检测
    if (obj == null) return obj + "";
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[toString.call(obj)] || "object" :
        typeof obj;
};

缺点：上面执行就是需要手写typearr的类型

var   class2type = {},
      toString = class2type.toString, //->Object.prototype.toString 检测数据类型

 function toType(obj) {
    if (obj == null) return obj + "";
    if (typeof obj !== "object" && typeof obj !== "function") return typeof obj;
    var reg = /^\[object ([0-9A-Za-z]+)\]$/,
        value = reg.exec(toString.call(obj))[1] || "object";
    return value.toLowerCase();
};