js数据类型检测底层机制

数据类型

Number/String/Boolean/Null/Undefined/Object/Symbol/BigInt

数据类型检测的方式以及底层机制

一、typeof
1.在计算机底层基于数据类型的值(二进制)进行检测
2.比如:typeof null // “object” 对象存在计算集中,都是以000开始的二进制存储,null也是,所以检测出来的结果是对象
3.typeof只能检测基本数据类型,检测引用数据类型(普通对象/数组对象/正则对象/日期对象)都为"object"

let num = 1
console.log(typeof num)//"number"

二、instanceof
1.检测当前实例是否属于这个类的。底层机制:只要当前类出现在实例的原型链上,结果都是为true,也就是都都可以找的到
2.由于我们可以手动随意的修改原型的指向,所以检测出来的结果是不准的
3.不能检测基本数据类型

let obj = {}
console.log(obj instanceof Array) //false
console.log(obj instanceof Object) //true

三、constructor
1.支持基本数据类型的检测。
2.检测当前实例是哪一个类构造的
3.缺陷:由于可以手动随意改变constructor的指向,所以检测出来的也不准确

let obj = {}
console.log(obj.constructor === Object)// true
console.log(obj.constructor === Array) //false

四、Object.prototype.toString.call([value]) (最好的检测类型的方法)
1.标准检测数据类型的方法: Object.prototype.toString 不是转成字符串, 是返回当前实例所属类的信息
2.标准的检测方法 “[object Number/String/Boolean/Null/Undefined/Symbol/Object/Array/RegExp/Date/Function]”

示例一:
let obj = {
	name:"精进技术"
}
obj.toString(); => "[object Object]"
toString方法执行, this是obj  所以检测是obj它所属类的信息
推测:是不是只要把Object.prototype.toString执行,让它里面的this变为要检测的变量/实例,那就能返回当前变量/实例所属的类的信息
console.log(Object.prototype.toString.call(obj))//"[object Object]"

示例二:
let arr = []
console.log(Object.prototype.toString.call(arr))//"[object Array]"

综上所述,每一种数据类型的检测都有其自身的局限性,为了更好的适应全方位的数据类型检测方法,需要结合各种数据类型封装成一个通用以及相对完美的类型检测方法。

检测数据类型公共的方法
let class2Type = {}
let 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
}

console.log(toType([])) //array
console.log(toType({})) //object
console.log(toType('')) //string
console.log(toType(null)) //string


//将数据类型检测封装成一个工具包,仅供参考
(function() {
    let class2Type = {}
    let 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
})()
console.log(toType([])) //array
console.log(toType({})) //object
console.log(toType('')) //string
console.log(toType(null)) //string

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值