JavaScript判断数据类型的四种方法详解

前言

在JavaScript开发中，判断变量的数据类型是一个基础且高频的问题。无论是在日常编码还是技术面试中，这都是一道常见的考题。

根据ECMAScript规范，数据类型主要分为基本类型和引用类型两大类，共计7种。

基本类型包括：String、Number、Boolean、Symbol、Undefined、Null。

引用类型主要为Object。

基本类型因占用空间固定，存储在栈内存中，按值访问，有助于提升变量查询效率。

引用类型因值大小可变，存储在堆内存中，栈中仅保存指向堆内存的指针，按址访问。除Object外，引用类型还包含Function、Array、RegExp、Date等。

由于ECMAScript是松散类型的，必须通过特定手段检测变量类型。JavaScript提供了多种检测方法，但结果并不完全一致。

本文将介绍四种常用的数据类型判断方法，并分析各自存在的问题。

1、typeof

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

typeof''; // string 有效
typeof1; // number 有效
typeofSymbol(); // symbol 有效
typeoftrue; //boolean 有效
typeofundefined; //undefined 有效
typeofnull; //object 无效
typeof[] ; //object 无效
typeofnewFunction(); // function 有效
typeofnewDate(); //object 无效
typeofnewRegExp(); //object 无效

typeof在某些情况下返回的结果虽技术上正确，但可能令人困惑：

• 对于基本类型，除null外，typeof均能返回正确结果。
• 对于引用类型，除function外，typeof一律返回object。
• 对于null，typeof返回object。
• 对于function，typeof返回function。

实际上，null拥有自己的Null类型，数组、日期、正则等引用类型也有具体类型。但typeof仅返回其原型链顶端的Object类型，虽无语法错误，却非我们期望的精确结果。

2、instanceof

instance用于判断A是否为B的实例，语法为A instanceof B。若A是B的实例，返回true，否则返回false。需注意，instanceof检测的是原型关系，其内部执行逻辑可模拟为：

instanceof (A,B) = {
    varL = A.__proto__;
    varR = B.prototype;
    if(L === R) {
        // A的内部属性 __proto__ 指向 B 的原型对象
        returntrue;
    }
    returnfalse;
}

从上述逻辑可知，当A的__proto__指向B的prototype时，判定A为B的实例。示例如下：

[] instanceof Array; // true
{} instanceof Object;// true
newDate() instanceof Date;// true
 
function Person(){};
newPerson() instanceof Person;
 
[] instanceof Object; // true
newDate() instanceof Object;// true
newPerson instanceof Object;// true

尽管instanceof能识别[]是Array的实例，但它也认为[]是Object的实例。原因在于：

分析[]、Array、Object三者的关系：

instanceof检测到[].__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仅能判断对象是否属于某类的实例，无法精确判断对象的具体类型。

instanceof的另一个问题在于它假设只有一个全局执行环境。若网页包含多个框架，则存在多个全局执行环境及不同版本的构造函数。若从一个框架向另一个框架传入数组，该数组与第二个框架中原生创建的数组具有不同的构造函数，导致instanceof判断失效。

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

针对数组检测问题，ES5引入了Array.isArray()方法。该方法用于确认对象是否为Array类型，且不区分对象的创建环境。

if(Array.isArray(value)){
   //对数组执行某些操作
}

Array.isArray()本质上是检测对象的[[Class]]内部属性值。[[Class]]格式为[object Xxx]，Xxx即为具体类型。对于数组，[[Class]]值为[object Array]。

3、constructor

当函数F被定义时，JS引擎会为F添加prototype原型，并在prototype上添加constructor属性，指向F的引用。如下所示：

当执行var f = new F()时，F作为构造函数，f为其实例。此时，F原型上的constructor属性传递给f，因此f.constructor == F。

可见，F通过prototype上的constructor引用自身。当F作为构造函数创建对象时，constructor属性被继承到新对象中。从原型链角度看，构造函数F即为新对象的类型。此举旨在使新对象具备可追溯的数据类型。

JavaScript内置对象的内部构建也遵循此机制：

细节问题：

1. null和undefined是无效对象，不存在constructor属性，需通过其他方式判断。

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

为何变为Object？

因为prototype被重新赋值为{ }，而{ }是new Object()的字面量形式。new Object()会将Object原型上的constructor传递给{ }，即Object本身。

因此，为规范开发，重写对象原型时通常需重新赋值constructor，以确保对象实例类型不被篡改。

4、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(newFunction()) ; // [object Function]
Object.prototype.toString.call(newDate()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(newRegExp()) ; // [object RegExp]
Object.prototype.toString.call(newError()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的引用

总结

本文介绍了利用JS判断数据类型的四种方法。如需了解更多JS判断数据类型相关内容，请搜索本站历史文章或继续浏览相关文章。感谢大家的支持！