浅述JS类型检测

类型检测

判断JS数据类型的几种方法

首先要了解JS的数据类型:
其中包含:Number,String,Boolean,Undefined,Null,Symbol(ES6新增),Object(里面包含了数组arr ,函数function,日期Date,null,还有ES5之后的新增,set类型,map类型,WeakSet以及WeakMap)

typeof

我们常常使用typeof来判断数据类型。
在这里插入图片描述
我们定义了一组基本类型,并且使用typeof进行类型判断并输出在控制台,首先我们猜想结果可能是number string undefined null boolean symbol。那让我们来看看实际情况:
在这里插入图片描述
除了null出乎意料之外,其余的都在掌控之中,如果清楚原型和原型链的伙伴应该就会知道,null其实是对象原型链的顶端,所以它会输出为Object,那么除了null之外,number,string,symbol,Boolean,undefined,这5中类型我们使用typeof就可以区分了。
那Object包含的那一堆数据类型呢?
接着看
在这里插入图片描述
我们猜想这一组的结果可能是:array,set,map,weakset,weakmap,function。
那么实际情况呢?
在这里插入图片描述
可以看到,除了function可以使用typeof 检测类型以外,其余的都被敷衍了事打出了Object。
由此我们可以得出:number,undefined,boolean,symbol,function,string这六种数据类型使用typeof就可以检测,而检测null时始终会输出Object(详情关注原型),至于array,date等。要做到准确区分typeof好像就无能为力啦~

instanceof

instanceof用于检测检测对象的原型链上是否存在构造函数的prototype属性。例如 arr instanceof Array 就是检测arr的原型链上面是否存在Array这个构造函数。

注意:instanceof是用于检测对象,像直接赋值创建的number,string,boolean等原始类型,直接使用instanceof检测会报错。如果使用new Number(2),这种方式创建,则可以达到预期。

那我们来看看object中array,date,set,map等类型的检测吧。
在这里插入图片描述
在这里插入图片描述
可以看到instanceof 是查找原型链的,那么如果我们创建了一个构造函数和该构造该函数的一个实例,需要的情况下可以使用这种方式去判断此实例到底是不是来自这个构造函数。但是使用这种方式有一个弊端,因为Object是的prototype存在于所有的原型链,如果给了我一个检测对象,不知道它的构造函数到底是array,set还是map。这种情况下。一个一个的试显然不是明智的做法,直接用object也根本判断不出来精确类型,那有没有一种直接就能明确判断检测类型的快准狠的方法?

Object.prototype.toString.call()

这是所有object类型顶层原型链object.prototype上面的方法,用于精准检测数据类型。看到toString是不是觉得很熟悉?第一反应就是把什么什么转换为字符串,比如number.toString(),array.toString.而且我们神奇的发现像number,string,array他们的prototype上面其实也有toString的方法,就是用于转换字符串。其实toString方法是被继承下来了,但是子级的prototype内部重写了这个方法,我们直接使用[].toString()其实是用了子级内部重写之后的方法,并不是使用的顶层Object.prototype中的toString的方法。那我们要使用顶层中的toString去判断类型该如何使用呢?答案就是改变Object.prototype.toString方法中的this指向,指向我们要判断的检测对象。
在这里插入图片描述

在这里插入图片描述
这就春暖花开神清气爽。

补充:判断数组还有一种方式:Array.isArray(),返回布尔值

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值