判断html对象有值,如何检测object对象的具体类型？

获取对象具体类型的功能函数

HTML5学堂：JavaScript当中，时常会使用到typeof来进行数据类型的检测，但是我们觉得typeof不能够满足我们的需求，对于数组、函数、时间对象等，使用typeof返回的都是“object”，如果我们希望更进一步的检测要怎么办呢？一起来看吧~

toString方法

在JavaScript当中，想要判断一个对象值属于哪种内置对象，最靠谱的方法就是使用toString

先上代码

var str = 'HTML5学堂';

var arr = ['独行冰海', '梦幻雪冰'];

var obj = {editor : '其其'};

var judge = true;

console.log(Object.prototype.toString.call(str));

console.log(Object.prototype.toString.call(arr));

console.log(Object.prototype.toString.call(obj));

console.log(Object.prototype.toString.call(judge));

打印结果

为何要用call方法？为何返回的是[object xxxx]，别急，听我慢慢道来~

关于toString

ECMAScript5.0当中，对toString的原理是如此描述的

1 如果传入的对象值为undefined，则返回[object Undefined]

2 如果传入的对象值为null，则返回[object Null]

3 针对传入的对象执行ECMAScript引擎中的方法ToObject。将原始值类型转换成包装类型。

4 获取传入对象的[[Class]]属性值

5 计算出"[object 传入对象的[[Class]]属性值]"

6 返回这个计算结果

[[Class]]是个神马玩意

[[Class]]是一个内部属性，所有的对象都拥有这个属性，它是一个字符串值，表明该对象的类型。

[[Class]]属性在ECMAScript6.0当中，被内部属性[[NativeBrand]]取而代之，该属性的值对应一个标志值，可以用来区分原生对象的类型。

[[NativeBrand]]返回的内容和[[Class]]并不相同。那么我们是不是不能使用toString了呢？

不要紧，虽然[[NativeBrand]]这个内部属性与[[Class]]规则不完全一样，但是toString方法也进行了相应的修改与调整，返回的也依旧是利利下面提到的这几个返回值。

toString的返回值有哪几种

Null； Undefined； String； Number； Boolean； Object

Arguments； Array； Date； Error； Function； JSON； Math； RegExp

简单的总结一下

通过Object.prototype.toString方法能够实现类型的检测

这种方法在调用的时候，首先会将要处理的对象转换为包装类型(而不是值类型) —— 这个操作是内部进行的

之后，再内部调用，找到当前对象的[[Class]]值

返回[object 具体类型];

使用call的主要原因？——当然是改变this的指向了，Object.prototype.toString()当中toString方法是Object的，不是当前要调用的对象的，我们希望针对相应对象调用toString方法，自然要改变this指向了~

利用toString封装的功能函数

呵呵呵，实现类型检测功能，这才是我琢磨toString的目的~！！！

function checkType(ele) {

return Object.prototype.toString.call(ele).replace(/[\[\]]/g, '').split(' ')[1].toLowerCase();

}

var arr = ['HTML5学堂', '利利-独行冰海', '堡堡-梦幻雪冰', '其其'];

console.log(checkType(arr));

本测试返回的结果是"array"~~~吼吼吼，这样，一个检测对象类型的功能函数就封装完毕啦。

HTML5小编-利利&其其 耗时2.5h

本文中的toString方法参考了网络上的相关资料——《紫云飞的博客园》，感谢博主的付出~

欢迎沟通交流~HTML5学堂

HTML5学堂微信~欢迎扫码关注