正文

类型和原生函数及类型转换（二：终结js类型判断）

IP云
IP云V管理员/6 阅读
06/22
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
  • typeof
  • instanceof
  • isArray()
  • Object.prototype.toString.call()
  • DOM对象与DOM集合对象的类型判断

一、typeof

typeof是一个一元运算符，放在任意类型的运算数前，这个运算返回的是字符串，该字符串说明的是运算数的类型。

在原始值类型中除了null都能正确的返回对应的类型字符串名称，即：number、string、boolean、undefined可以正确判断类型。typeof null ==> object。

但是需要注意的typeof NaN 是 number,除了正常的数值以外，还有Number.MAX_VALUE、Number.MIN_VALUE、Number.NaN、Number.POSITIVE_INFINITY、Number.NEGATIVE_INFINITY都是返回number。（NaN在类型上本身就属于数字的一种，其他特别的数值那也肯定是数值）

在引用值类型中Function返回的是function，但是Array却又返回的是object。

其余的引用值类型都是返回object。

注意：typeof(obj)判断的obj如果未定的话也不会报错，而是返回“undefined”。

---------------------------------------------------------------------------------------------------

懒人理解区：

(简析：number,string,boolean,object,undefined,object,function可以正确的获取对应的类型字符串值，typeof遇到数组，对象，null都是返回object。)

二、instanceof

instanceof的内部机制是通过判断对象的原型链中是否能不能找到类型的prototype(原型)。在原型链上能找到对应的原型就会返回true。

1 instanceof Number // false
new Number(1) instanceof Number// true
{} instanceof Object // 会报错，这是语法错误，这里的{}并不表示对象
var a = {}
a instanceof Object // true
null instanceof Object // false
[] instanceof Array // true

那是不是就就可以用instanceof配合typeof来完成数组的判断呢？别急看一下代码：

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3,4,5);
//这个写法IE下不支持，标准浏览器firefox,chrome下可以实现
console.log(arr);//打印出：[1,2,3,4,5]
console.log(arr instanceof Array);//false
console.log(arr.constructor === Array);//false

跨框架iframe的时候使用页面中的数组时，会失败，因为在不同的框架iframe中，创建的数组是不会相互共享其prototype属性的。类似将外层Array原型直接克隆到自己的内部window上，而instanceof的内部是基于原型链来判断，所以就没法判断了。

三、isArray()

用来判断对象是否是数组，是ES5标准的方法，在低版本的浏览器上不兼容。

Array.isArray(obj)

这个方法用来做类型判断的意义不大，除非做一些纯粹的移动端web开发或者确定只兼容ES5标准的浏览器项目。

四、Object.prototype.toString.call()

这个方法的使用我在上一篇博客：类型和原生函数及类型转换（一）末尾做了详细介绍，就不在这里赘述了，不是很了解的话可以到上一篇博客详细了解，这篇博客我主要就实现原理剖析。

在ES5.1中,除了规范写的更详细一些以外,Object.prototype.toString方法和[[class]]内部属性的定义上也有一些变化,Object.prototype.toString方法的规范如下:

15.2.4.2 Object.prototype.toString ( )

在toString方法被调用时,会执行下面的操作步骤:

  1. 如果this的值为undefined,则返回"[object Undefined]".
  2. 如果this的值为null,则返回"[object Null]".
  3. 让O成为调用ToObject(this)的结果.
  4. 让class成为O的内部属性[[Class]]的值.
  5. 返回三个字符串"[object ", class, 以及 "]"连接后的新字符串.

如果你对JavaScript的值类型有所了解就知道，undefined和null没有包装类（在我上一篇博客中有介绍），如果要将这两个值类型的变量作为对象来使用在代码中会报错（这里涉及到了隐式类型转换），在ES3中这两个值类型的变量就没办法使用Object.prototype.toString.call()这种方式来实现类型判断（ES3中没有对这两个值类型的变量做特殊处理）。

所有内置对象的[[Class]]属性的值是由本规范定义的.所有宿主对象的[[Class]]属性的值可以是除了"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"之外的的任何字符串.[[Class]]内部属性是引擎内部用来判断一个对象属于哪种类型的值的.需要注意的是,除了通过Object.prototype.toString方法之外,本规范没有提供任何其他方式来让程序访问该属性的值(查看 15.2.4.2)

最后来一个兼容的ES5的类型判断方法，ES6中的Object.prototype.toString.call()有些改变，是因为[[class]]内部属性没有，取而代之的是另外一个内部属性[[NativeBrand]].[[NativeBrand]]属性，但是toString方法的实现逻辑依然没有差别，后期在ES6部分我再将对应的兼容方法写出来。

function myTypeof(value){
var result = NaN;
var valOf = typeof value;
var inOf = value instanceof String || value instanceof Number || value instanceof Boolean;
var typeObj = {
"[object Object]":"object",
"[object Array]":"array",
"[object Function]":"function",
"[object Date]":"date",
"[object Error]":"error",
"[object JSON]":"json",
"[object Math]":"math",
"[object RegExp]":"regExp",
"[object Boolean]":"boolean",
"[object String]":"string",
"[object Number]":"number",
"[object Undefined]":"undefined",
"[object Null]":"null"
} var str = Object.prototype.toString.call(value);
for(var i in typeObj){
if(i == str){
result = typeObj[i];
break;
}
}
if( result === "number" && isNaN(value)){ //此处可以考虑 value === "NaN"这种情况
return NaN;
}
if( inOf && valOf === "object"){
return result + "-Object";
}
return result;
}

五、DOM对象与DOM集合对象的类型判断

<div class="demo"></div>
//js
var do = document.getElementsByClassName("demo");
Object.prototype.toString.call(do);//"[object HTMLCollection]"
Object.prototype.toString.call(document);//"[object HTMLDocument]"