一、写在前面
今天看到一道面试题——用js手写一个判断数据类型的函数。然后我首先想到的就是通过if....else if .....else if...，但是这样写就会给面试官感觉特别Low。那我们来看一下如何实现。
二、typeof
typeof操作符返回一个字符串(全小写字母)，表示未经过计算的操作数的类型。

console.log(typeof 1);   //number
console.log(typeof 1.11);   //number
console.log(typeof Math.PI);   //number
console.log(typeof Infinity);   //number
console.log(typeof NaN);   //number
console.log(typeof Number(1));   //number
console.log(typeof "");  //string
console.log(typeof "abc");  //string
console.log(typeof "1");  //string
console.log(typeof (typeof 1));  //string
console.log(typeof String(1));  //string
console.log(typeof false); //boolean
console.log(typeof true); //boolean
console.log(typeof Boolean(1)); //boolean
console.log(typeof !!(1)); //boolean
console.log(typeof Symbol()); //symbol
console.log(typeof Symbol('foo')); //symbol
console.log(typeof Symbol.iterator); //symbol
console.log(typeof undefined); //undefined
console.log(typeof function(){}); //function
console.log(typeof class C{}); //function
console.log(typeof Math.min); //function
console.log(typeof {}); //object
console.log(typeof null); //object
console.log(typeof []); //object
console.log(typeof new Date()); //object
console.log(typeof new RegExp()); //object
console.log(typeof new Boolean(true)) //object
console.log(typeof new Number(1)) //object
console.log(typeof new String('abc')) //object

三、instanceof
instanceof用来检测构造函数的prototype属性是否出现在某一个实例对象的原型链上。
语法： 实例对象 instanceof 构造函数

console.log({} instanceof Object); //true
console.log([] instanceof Array);  //true
console.log([] instanceof Object); //true
console.log("123" instanceof String); //false 这里是因为'123'不是对象，而是原始值
console.log(new String(123) instanceof String); //true   这里的new String(123)就是实例对象

instanceof函数的实现

<script>
    function myInstanceof(left, right) {
      let proto = Object.getPrototypeOf(left)
      let prototype = right.prototype
      while (true) {
        if (!proto) return false
        if (proto === prototype) return true
        proto = Object.getPrototypeOf(proto)
      }
    }
    console.log(myInstanceof({}, Object))    //true
    console.log(myInstanceof("123", Array))  //false
  </script>

四、constructor
对象的constructor属性用于返回创建该对象的函数，也就是我们常说的构造函数。
语法：object.constructor

console.log(''.constructor === String)	//true
console.log(true.constructor === Boolean)	//true
console.log(new Number(1).constructor === Number)	//true
console.log(new Function().constructor === Function)	//true
console.log(new Date().constructor === Date)	//true
console.log(new Error().constructor === Error)	//true
console.log([].constructor === Array)	//true
console.log(document.constructor === HTMLDocument)	//true
console.log(window.constructor === Window)	//true

五、Object.prototype.toString()
toString()是Object原型对象上的方法，返回的是代表该对象的字符串。
调用Object.prototype.toString方法返回的格式是[object Xxxx],其中Xxxx就是对象的类型。
而对于其他对象(Array、String、Number、Boolean、RegExp、Date等)，则需要通过call、apply来调用才能返回正确的类型信息。
Object.prototype.toString()与Object.toString()的区别
Object.toString()的toString()是Object构造函数上的方法，返回的是对应的函数。
Object.prototype.toString()的toString()是Object原型对象上的方法，返回的是代表该对象的字符串。
具体如下图所示：
Object.toString()

console.log(Object.toString([])) //function Object() { [native code] }

Object.prototype.toString()

console.log(Object.prototype.toString({}))  //[object Object]

六、最后我们进行封装

function getStyle(data) {
      let type = typeof(data)
      if(type !=="object") {
        return type
      }
      return Object.prototype.toString.call(data).replace(/^\[object (\S+)\]$/, "$1")
    }