JS 应用篇(二):判断JS数据类型方法介绍

287 阅读5分钟

在ECMAScript规范中,共定义了7种数据类型,分为 基本类型 和 引用类型 两大类,如下所示:

基本类型:String、Number、Boolean、Symbol、Undefined、Null
引用类型:Object

基本类型也称为简单类型,由于其占据空间固定,是简单的数据段,为了便于提升变量查询速度,将其存储在栈中,即按值访问。

引用类型也称为复杂类型,由于其值的大小会改变,所以不能将其存放在栈中,否则会降低变量查询速度,因此,其值存储在堆(heap)中,而存储在变量处的值,是一个指针,指向存储对象的内存处,即按址访问。引用类型除 Object 外,还包括 Function 、Array、RegExp、Date 等等。

鉴于ECMAScript是松散类型的,因此需要有一种手段来检测给定变量的数据类型。对于这个问题,JavaScript 也提供了多种方法,但遗憾的是,不同的方法得到的结果参差不齐。

一、typeof方式

typeof是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示,包括以下7种:number、boolean、symbol、string、object、undefined、function 等

typeof '';// string 符合
typeof 1;// number 符合
typeof Symbol();// symbol 符合
typeof true;//boolean 符合
typeof undefined;//undefined 符合
typeof null;//object 不符合(希望是null)
typeof [] ;//object 不符合(希望是array)
typeof new Function();// function 符合
typeof new Date();//object 不符合(希望是Date)
typeof new RegExp();//object 不符合(希望是RegExp)

有些时候,typeof 操作符会返回一些令人迷惑但技术上却正确的值:

  • 对于基本类型,除 null 以外,均可以返回正确的结果。
  • 对于引用类型,除 function 以外,一律返回 object 类型。
  • 对于 null ,返回 object 类型。
  • 对于 function 返回 function 类型。

其中,null有属于自己的数据类型Null ,引用类型中的 数组、日期、正则 也都有属于自己的具体类型,而 typeof 对于这些类型的处理,只返回了处于其原型链最顶端的 Object 类型,没有错,但不是我们想要的结果。

二、instanceof方式

instanceof是用来判断 A 是否为 B 的实例。

表达式为:A instanceof B, 如果 A 是 B 的实例,则返回 true,否则返回 false。在这里需要特别注意的是:instanceof 检测的是原型

'' instanceof String; // false
1 instanceof Number; // false
Symbol() instanceof Symbol; // false
true instanceof Boolean; // false
undefined instanceof undefined; // 报错
null instanceof null; // 报错


[] instanceof Array; // true
[] instanceof Object; // true


new Function() instanceof Function; // true
new Function() instanceof Object; // true


new Date() instanceof Date; // true
new Date() instanceof Object; // true
new RegExp() instanceof RegExp; // true
new RegExp() instanceof Object; // true

我们发现,instanceof方式并不能判断出基本类型,而且虽然instanceof能够判断出 [ ] 是Array的实例,但它认为 [ ] 也是Object的实例,为什么呢?

我们来分析一下 [ ]、Array、Object 三者之间的关系:

[ ].__proto__ 指向 Array.prototype,而 Array.prototype.__proto__ 又指向了Object.prototype,最终 Object.prototype.__proto__ 指向了null,标志着原型链的结束。因此,[]、Array、Object 就在内部形成了一条原型链:

从原型链可以看出,[] 的 __proto__ 直接指向Array.prototype,间接指向 Object.prototype,所以按照 instanceof 的判断规则,[] 就是Object的实例,依次类推,类似的 new Date()、new Person() 也会形成一条对应的原型链 。因此,instanceof 只能用来判断两个对象是否属于实例关系, 而不能够有效的判断一个对象实例具体属于哪种类型。

注意:
如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[0].Array;
var arr =new xArray(1,2,3);// [1,2,3]
arr instanceof Array;// false

三、constructor方式

function F(){}
var f = new F()
f.constructor === F // true

当一个函数F被定义时,JS引擎会为F添加 prototype 原型,然后再在 prototype上添加一个 constructor 属性,并让其指向F的引用。

当执行 var f = new F() 时,F被当成了构造函数,f是F的实例对象,此时F原型上的constructor传递到了f上,因此 f.constructor == F。当F作为构造函数来创建对象时,原型上的 constructor 就被遗传到了新创建的对象上,从原型链角度讲,构造函数F就是新对象的类型。因此我们可以根据对象的constructor来判断对象类型。

''.constructor === String; // true
1.constructor === Number; // 报错
Symbol.constructor === Symbol; // false
true.constructor === Boolean; // true
null.constructor === null; // 报错
undefined.constructor === undefined; // 报错
[].constructor === Array; // true
Function.constructor === Function; // true
new Date().constructor === Date; // true
new RegExp().constructor === RegExp; // true

注意:

  1. null 和 undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。

  2. 函数的constructor是不稳定的,这个主要体现在自定义对象上,当开发者重写prototype后,原有的constructor引用会丢失,constructor会默认为Object。

四、Object.prototype.toString方式

toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。

对于 Object 对象,直接调用 toString() 就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。

Object.prototype.toString.call('') ;  // [object String]
Object.prototype.toString.call(1) ;   // [object Number]
Object.prototype.toString.call(true) ;// [object Boolean]
Object.prototype.toString.call(Symbol());//[object Symbol]
Object.prototype.toString.call(undefined) ;// [object Undefined]
Object.prototype.toString.call(null) ;// [object Null]
Object.prototype.toString.call(new Function()) ;// [object Function]
Object.prototype.toString.call(new Date()) ;// [object Date]
Object.prototype.toString.call([]) ;// [object Array]
Object.prototype.toString.call(new RegExp()) ;// [object RegExp]
Object.prototype.toString.call(new Error()) ;// [object Error]
Object.prototype.toString.call(document) ;// [object HTMLDocument]
Object.prototype.toString.call(window) ;//[object global] window 是全局对象 global 的引用

因此,在判断JS数据类型时建议使用Object.prototype.toString方式。

参考:

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

typeof 和 instanceOf的区别

javascript 判断变量是否是数组(Array)