JavaScript 之你可能不了解的数据类型检测

谁践踏了优雅 2022-11-16 13:38 294阅读 0赞

### 1. 数据类型检测 ###

> 你真的了解数据类型检测吗？

四种数据类型检测：

*  `typeof`
 *  `instanceof`
 *  `constructor`
 *  `Object.prototype.toString.call()`

#### 1.1 `typeof` ####

`typeof` 是一元运算符，返回一个字符串类型。表示对某个变量类型的检测。 除了 `null` 类型以及 `Object` 类型不能准确判断外，其他数据类型可以返回正确的类型。

typeof undefined => "undefined"
    typeof '10' => "string"
    typeof 10 => "number"
    typeof false => "boolean"
    typeof Symbol() => "symbol"
    typeof Function => "function"
    typeof Object => "function"
    typeof null => "object"
    typeof [] => "object"
    typeof { } => "object"

> 为什么 typeof null 等于 object ？

对象在底层存储是用二进制表示的，在 `javaScript` 中，如果二进制的前三位都为 0 的 话，系统会判定为是 `Object` 类型。 `null` 的存储二进制是 000 ，也是前三位，所以系统判定 `null` 为 `Object` 类型。

##### 1.1.1 扩展： #####

这个 bug 个第一版的 `javaScript` 留下来的，扩展一下其他的几个类型标志位：

*  000 ：对象类型
 *  1 ：整型，数据是31位带符号整数
 *  010 ：双精度类型，数据是双精度数字
 *  100 ：字符串，数据是字符串
 *  110 ：布尔类型，数据是布尔值

> 那如果多几个 `typeof` 呢？

console.log(typeof typeof typeof null)

> `typeof null` 返回的是 “object”，`typeof` “object” 返回的是 “string”，`typeof` “string” 返回的是 “string”

##### 1.1.2 如何解决 `typeof` 判断类型不准确的问题 #####

function myTypeof(obj) { 
      let res = Object.prototype.toString.call(obj).split(' ')[1]
      res = res.substring(0, res.length - 1).toLowerCase()
      return res
    }
    typeOf([])        // 'array'
    typeOf({ })        // 'object'
    typeOf(new Date)  // 'date'

#### 1.2 `instanceof` ####

`instanceof` 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。可以用来进行判断**某个对象是不是另一个对象的实例**。

`instanceof` 的原理是通过判断**该对象的原型链中是否可以找到该构造类型的 prototype 类型**

console.log(2 instanceof Number);                    // false
    console.log(true instanceof Boolean);                // false 
    console.log('str' instanceof String);                // false 
    console.log([] instanceof Array);                    // true
    console.log(function(){ } instanceof Function);       // true
    console.log({ } instanceof Object);                   // true

优点：能够区分Array、Object和Function，适合用于判断自定义的类实例对象

缺点：Number，Boolean，String基本数据类型不能判断。

> 那这道题呢？

null instanceof Object
    // false

> 之前的 typeof null => “object”，那为什么 null instanceof Object 是 false？

##### 1.2.1 手写实现 `instanceof` #####

function Foo() { }
    var f1 = new Foo()
    
    function myInstanceof(left, right) { 
      let proto = Object.getPrototypeOf(left)
      while(true) { 
        if (proto === null) return false
        if (proto === right.prototype) return true
        proto = Object.getPrototypeOf(proto)
      }
    }
    
    console.log(myInstanceof(f1, Foo))

#### 1.3 `constructor` ####

使用 `xx.constructor.name` 构造函数来判断

// constructor 构造来判断
    console.log(fn.constructor.name) // Function
    console.log(date.constructor.name)// Date
    console.log(arr.constructor.name) // Array
    console.log(reg.constructor.name) // RegExp

#### 1.4 `Object.prototype.toString.call()` ####

可以区分 null，string ，boolean，number，undefined，array，function，object，date，math 数据类型。

// 判断基本类型
    Object.prototype.toString.call(null); // "[object Null]"
    Object.prototype.toString.call(undefined); // "[object Undefined]"
    Object.prototype.toString.call(“abc”);// "[object String]"
    Object.prototype.toString.call(123);// "[object Number]"
    Object.prototype.toString.call(true);// "[object Boolean]"
    
    // 判断引用类型
    function fn(){ 
      console.log(“mike”);
    }
    var date = new Date();
    var arr = [1,2,3];
    var reg = /[hbc]at/gi;
    
    Object.prototype.toString.call(fn); // "[object Function]"
    Object.prototype.toString.call(date); // "[object Date]"
    Object.prototype.toString.call(arr); // "[object Array]"
    Object.prototype.toString.call(reg); // "[object RegExp]"