JavaScript变量类型判断详解

方法介绍

在JavaScript中判断变量类型的方法常用的有那么几种

1. typeof
2. constructor
3. instanceof
4. Object.prototype.toString.call(obj)

每一种方法都有不同的特性，下面逐个介绍

typeof

typeof在开发过程中比较常用，通过表格展示typeof检测各种类型的返回值

检测类型	返回值
String	“string”
Number	“number”
Boolean	“boolean”
undefind	“undefind”
Function	“function”
null	“object”
Array	“object”
Object	“object”

首先typeof检测结果是一个字符串，从表格中可以看出，typeof检测一些基本类型以及Function是可以的，但是null、Array、Object三种类型的变量检测均返回“object”。Array是Object的子类型，但是null为什么是“object”？下面看一下 You-Dont-Know-JS 里面的介绍：

要是它返回 “null” 就好了（而且是正确的！），但是这个原有的 bug 已经存在了近二十年，而且好像永远也不会被修复了，因为有太多已经存在的 web 的内容依存着这个 bug 的行为，“修复”这个 bug 将会 制造 更多的“bug”并毁掉许多 web 软件。

不同的对象在底层都表示为二进制， 在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型， null 的二进制表示是全 0， 自然前三位也是 0， 所以执行 typeof 时会返回“object”。

当然typeof也可以判断出object是否为null，方法如下

var a = null;
!a && typeof a === "object";

constructor

简单介绍下constructor实现的原理，constructor通过判断被检测对象的构造函数，从而实现类型检测。具体使用见如下代码

var arr = new Array();
arr.constructor === Array; //true

但这也存在一个问题，从字面意思来看，constructor只能检测到最近一层的构造函数，并不能检测到原型链上面的constructor

function Arr() {};
var arr = new Arr();
arr.constructor === Arr; //true
arr.constructor === Array; //false

instanceof

instanceof跟constructor的区别在于，instanceof会去寻找原型上面的所有constructor，直到找到为止，如果找不到，则返回false

function Arr() {};
var arr = new Arr();
arr instanceof Arr; //true
arr instanceof Array; //true
arr instanceof Object; //true

由于Array是Object的一个子类所以 arr instanceof Object 也是返回true

Object.prototype.toString.call(obj)

下面来看一段 You-Dont-Know-JS 介绍

typeof 的结果为 “object” 的值（比如数组）被额外地打上了一个内部的标签属性 [[Class]]（请把它考虑为一个内部的分类方法，而非与传统的面向对象编码的类有关）。这个属性不能直接地被访问，但通常可以间接地通过在这个值上借用默认的 Object.prototype.toString(…) 方法调用来展示

var arr = new Array();
var obj = new Object();
Object.prototype.toString.call(arr) === "[object Array]"; // [[Class]] Array
Object.prototype.toString.call(obj) === "[object Object]"; // [[Class]] Object