JS高级之数据类型之问——检测篇

朴灿烈づ我的快乐病毒、 2023-01-10 10:27 141阅读 0赞

### 这里写目录标题 ###

*  JS的数据类型
 *  JS的数据类型检测
 *   *  第一种判断方法：typeof
     *  第二种判断方法：instanceof
     *   *  实现一个 instanceof 的底层实现
     *  第三种判断方法：Object.prototype.toString
     *  实现一个全局通用的数据类型判断方法
     *  Object.is和===的区别？

# JS的数据类型 #

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20210123210858170.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg==,size\_16,color\_FFFFFF,t\_70][https_img-blog.csdnimg.cn_20210123210858170.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]  
、

# JS的数据类型检测 #

## 第一种判断方法：typeof ##

console.log("1="+typeof 1)
    	console.log("null="+typeof null)
    	console.log("[]="+typeof [])
    	console.log("{}="+typeof { })
    	console.log("console="+typeof console)
    	console.log("console.log="+typeof console.log)
    	console.log("undefined="+typeof undefined)
    	console.log("true="+typeof true)
    	console.log("'1'="+typeof '1')

**使用第一种的弊端是什么？**  
对于原始类型来说，除了 null 都可以调用typeof显示正确的类型。typeof null 会输出 object，但这只是 JS 存在的一个悠久 Bug，不代表 null 就是引用数据类型，并且 null 本身也不是对象。因此，null 在 typeof 之后返回的是有问题的结果，不能作为判断 null 的方法

***因此采用typeof判断对象数据类型是不合适的，采用instanceof会更好，instanceof的原理是基于原型链的查询，只要处于原型链中，判断永远为true***

## 第二种判断方法：instanceof ##

new 一个对象，那么这个新对象就是它原型链继承上面的对象了，通过 instanceof 我们能判断这个对象是否是之前那个构造函数生成的对象

let str = '2'
    console.log("str和new String"+str instanceof String)
    let null1 = null
    console.log("null和Object"+null1 instanceof Object)
    let Car = function() { }
    let benz = new Car()
    benz instanceof Car // true

### 实现一个 instanceof 的底层实现 ###

function myInstanceof(left, right) { 
    
      // 这里先用typeof来判断基础数据类型，如果是，直接返回false
    
      if(typeof left !== 'object' || left === null) return false;
    
      // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象
    
      let proto = Object.getPrototypeOf(left);
    
      while(true) {                   //循环往下寻找，直到找到相同的原型对象
    
        if(proto === null) return false;
    
        if(proto === right.prototype) return true;//找到相同原型对象，返回true
    
        proto = Object.getPrototypeof(proto);
    
        }
    
    }
    
    // 验证一下自己实现的myInstanceof是否OK
    
    console.log(myInstanceof(new Number(123), Number));    // true
    
    console.log(myInstanceof(123, Number));                // false

**对于Typeof和instanceof之间的区别：**

1.  instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型；
2.  而 typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了 function类型以外，其他的也无法判断。

## 第三种判断方法：Object.prototype.toString ##

toString() 是 Object 的原型方法，调用该方法，可以统一返回格式为 “\[object Xxx\]” 的字符串，其中 Xxx 就是对象的类型。对于 Object 对象，直接调用 toString() 就能返回 \[object Object\]；而对于其他对象，则需要通过 call 来调用，才能返回正确的类型信息。我们来看一下代码。

console.log("{}="+Object.prototype.toString({ }))
    console.log("{}="+Object.prototype.toString.call({ }))
    console.log("[]="+Object.prototype.toString.call([]))
    console.log("null="+Object.prototype.toString.call(null))
    console.log("function(){}="+Object.prototype.toString.call(function(){ }))

## 实现一个全局通用的数据类型判断方法 ##

function getType(obj){ 
      let type = typeof obj
      if (type != 'object'){ 
        return type
      }
      return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/,'$1')
    
    }
    console.log('getType(null)='+getType(null))

## Object.is和===的区别？ ##

**Object在严格等于的基础上修复了一些特殊情况下的失误，具体来说就是+0和-0，NaN和NaN。**

function is(x, y) { 
      if (x === y) { 
        //运行到1/x === 1/y的时候x和y都为0，但是1/+0 = +Infinity， 1/-0 = -Infinity, 是不一样的
        return x !== 0 || y !== 0 || 1 / x === 1 / y;
      } else { 
        //NaN===NaN是false,这是不对的，我们在这里做一个拦截，x !== x，那么一定是 NaN, y 同理
        //两个都是NaN的时候返回true
        return x !== x && y !== y;
      }

![在这里插入图片描述][20210123215057122.png]

[https_img-blog.csdnimg.cn_20210123210858170.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20221119/f77cc27646e84158aa26a8ca72c2d43b.png
[20210123215057122.png]: https://img-blog.csdnimg.cn/20210123215057122.png