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

雨点打透心脏的1/2处 2022-12-31 12:18 99阅读 0赞

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

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

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

*  基本类型也称为简单类型，由于其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈中，即按值访问。
 *  引用类型也称为复杂类型，由于其值的大小会改变，所以不能将其存放在栈中，否则会降低变量查询速度，因此，其值存储在堆(heap)中，而存储在变量处的值，是一个指针，指向存储对象的内存处，即按址访问。引用类型除 Object 外，还包括 Function 、Array、RegExp、Date 等等。

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

下面介绍常用的4种方法，并对各个方法存在的问题进行简单的分析

#### 1、typeof ####

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

typeof ''; // string 有效
    typeof 1; // number 有效
    typeof Symbol(); // symbol 有效
    typeof true; //boolean 有效
    typeof undefined; //undefined 有效
    typeof 10n; //bigint 有效
    typeof null; //object 无效
    
    typeof [] ; //object 无效
    typeof new Function(); // function 有效
    typeof new Date(); //object 无效
    typeof new RegExp(); //object 无效

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

*  对于基本类型，除 null 以外，均可以返回正确的结果。
 *  对于引用类型，除 function 以外，一律返回 object 类型。
 *  对于 null ，返回 object 类型。
 *  对于 function 返回 function 类型。
 *  其中，null 有属于自己的数据类型 Null ， 引用类型中的 数组、日期、正则 也都有属于自己的具体类型，而 typeof 对于这些类型的处理，只返回了处于其原型链最顶端的 Object 类型，没有错，但不是我们想要的结果。

#### 2、instanceof ####

instanceof 是用来判断 A 是否为 B 的实例  
表达式为：*A instanceof B*,如果 A 是 B 的实例，则返回 true,否则返回 false。  
在这里需要特别注意的是：**instanceof 检测的是原型**，我们用一段伪代码来模拟其内部执行过程：

instanceof (A,B) = { 
        var L = A.__proto__;
        var R = B.prototype;
        if(L === R) { 
            // A的内部属性 __proto__ 指向 B 的原型对象
            return true;
        }
        return false;
    }

注意:上面代码中\*\*A.**proto**\*\*方式不推荐使用,因为\_\_proto\_\_在safari和chrome中已经实现,在其他浏览器中存在兼容性问题.  
从上述过程可以看出，当 A 的 **proto** 指向 B 的 prototype 时，就认为 A 就是 B 的实例，我们再来看几个例子：

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

我们发现，虽然 instanceof 能够判断出 \[ \] 是Array的实例，但它认为 \[ \] 也是Object的实例，为什么呢？  
我们来分析一下 \[ \]、Array、Object 三者之间的关系：

![在这里插入图片描述][20201229181611135.png_pic_center]

从 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 操作符的问题在于，它假定只有一个全局执行环境。如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的构造函数。如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

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

针对数组的这个问题，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 的引用。如下所示：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_10_color_FFFFFF_t_70_pic_center][]

当执行 var f = new F() 时，F 被当成了构造函数，f 是F的实例对象，此时 F 原型上的 constructor 传递到了 f 上，因此 f.constructor == F  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_10_color_FFFFFF_t_70_pic_center 1][]

可以看出，F 利用原型对象上的 constructor 引用了自身，当 F 作为构造函数来创建对象时，原型上的 constructor 就被遗传到了新创建的对象上， 从原型链角度讲，构造函数 F 就是新对象的类型。这样做的意义是，让新对象在诞生以后，就具有可追溯的数据类型。  
同样，JavaScript 中的内置对象在内部构建时也是这样做的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_10_color_FFFFFF_t_70_pic_center 2][]

1.  null 和 undefined 是无效的对象，因此是不会有 constructor 存在的，这两种类型的数据需要通过其他方式来判断。
2.  函数的 constructor 是不稳定的，这个主要体现在自定义对象上，当开发者重写 prototype 后，原有的 constructor 引用会丢失，constructor 会默认为 Object

示例:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center][]

为什么变成了 Object？

因为 prototype 被重新赋值的是一个 \{ \}， \{ \} 是 new Object() 的字面量，因此 new Object() 会将 Object 原型上的 constructor 传递给 \{ \}，也就是 Object 本身。

因此，为了规范开发，在重写对象原型时一般都需要重新给 constructor 赋值，以保证对象实例的类型不被篡改。

#### 4、toString ####

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

对于 Object 对象，直接调用 toString() 就能返回 \[object Object\] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。有不了解call、apply、bind的应用和区别的可以参考我这篇文章:[call、apply、bind的应用和区别][call_apply_bind]

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(30n); // [object BigInt]
    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 Window] window 是全局对象 global 的引用

需要注意的是，必须通过Object.prototype.toString.call/apply来获取，而不能直接 new Date().toString(), 从原型链的角度讲，所有对象的原型链最终都指向了Object, 按照JS变量查找规则，其他对象应该也可以直接访问到Object的toString方法，而事实上，大部分的对象都实现了自身的toString方法，这样就可能会导致Object的toString被终止查找，因此要用call来强制执行Object的toString方法。

通过对toString的学习,我们能够将该类方式进行封装为一个简单的方法

function classOf(o){ 
      return Object.prototype.toString.call(o).slice(8, -1);
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_10_color_FFFFFF_t_70_pic_center 3][]

总结来说,toString()方法在判断是准确度算是较高的.

[20201229181611135.png_pic_center]: /images/20221120/2010593c5c2c4a73be5c4b34f5db7e37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_10_color_FFFFFF_t_70_pic_center]: /images/20221120/b9b0974704904176bef1a6cd557e583b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_10_color_FFFFFF_t_70_pic_center 1]: /images/20221120/af63a0197a1f40d0a5e300530a53b823.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_10_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201230094420657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA=,size_10,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201230153159302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA=,size_16,color_FFFFFF,t_70#pic_center
[call_apply_bind]: https://suwu150.blog.csdn.net/article/details/111539891
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_10_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201230102820589.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA=,size_10,color_FFFFFF,t_70#pic_center