js类型判断

原文详见：
https://github.com/mqyqingfeng/Blog/issues/28

前言

类型判断在web开发中有非常广泛的应用，简单的有判断数据还是字符串，进阶一点的判判断是数组还是对象，再进阶一点的判断是日期、正则、错误类型，再再进阶就是判断空对象、window、plainObject等等。

typeof

是我们最常用的typeof,我们经常看到是

console.log(typeof('yayu')); //string

的写法，但是typeof是一个正宗的运算符，就像加减乘除一样，这就解释了为什莫下面的写法也可行

console.log(typeof 'yayu'); //string

引用《JavaScript权威指南》中对typeof的介绍：

typeof是个一元操作符，放在其单个操作数前面，操作数可以是任意类型。返回值为表示操作数类型的一个字符串。

我们都知道，在ES6前，javaScriple类型一共有6种，，分别是：
Undefined、Unll、Boolean、Number、String、Object
然而当我们用typeof判断时，返回的结果却不一一对应。
undefined、object、boolean、number、string、object
注意以上都是小写的字符串。Null 和 Object 类型都返回了 object 字符串。

尽管不能一一对应，但是 typeof 却能检测出函数类型：

function a() {}
typeof a;
//function

所以 typeof 能检测出六种类型的值，但是，除此之外 Object 下还有很多细分的类型呐，如 Array、Function、Date、RegExp、Error 等。
如果用 typeof 去检测这些类型，举个例子：

var date = new Date();
var error = new Error();
console.log(typeof date); // object
console.log(typeof error); // object

返回的都是 object 呐，这可怎么区分~ 所以有没有更好的方法呢？
这里总结下：
typeof 不能检测Null 类型和Object 里除了function以外的其他对象具体类型。😎

Object.prototype.toString

那 Object.protototype.toString 究竟是一个什么样的方法呢？
规范上讲：
当 toString 方法被调用的时候，下面的步骤会被执行：

如果 this 值是 undefined，就返回 [object Undefined]
如果 this 的值是 null，就返回 [object Null]
让 O 成为 ToObject(this) 的结果
让 class 成为 O 的内部属性 [[Class]] 的值
最后返回由 "[object " 和 class 和 "]" 三个部分组成的字符串
通过规范，我们至少知道了调用 Object.prototype.toString 会返回一个由 "[object " 和 class 和 "]" 组成的字符串，而 class 是要判断的对象的内部属性。
让我们写个 demo:

console.log(Object.prototype.toString.call(undefined)) // [object Undefined]
console.log(Object.prototype.toString.call(null)) // [object Null]

var date = new Date();
console.log(Object.prototype.toString.call(date)) // [object Date]

注意：
1.可以通过 toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Object.prototype.toString.call() 或者 Object.prototype.toString.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为 thisArg。
2.这是因为toString为Object的原型方法，而Array 、Function等类型作为Object的实例，都重写了toString方法。

由此我们可以看到这个 class 值就是识别对象类型的关键！
那到底能识别多少种类型呢？
至少 12 种！
让我们看个 demo:

// 以下是11种：
var number = 1;     
var string = '123';   
var boolean = true;    
var und = undefined;  
var nul = null;      
var obj = {a: 1}     
var array = [1, 2, 3];  
var date = new Date();  
var error = new Error();
var reg = /a/g;        
var func = function a(){};

checkType(number, string, boolean, und, nul, obj, array,date, error, reg, func);

function checkType() {
  for(var i=0; i<arguments.length; i++) {
    console.log(Object.prototype.toString.call(arguments[i]));
  }
}
[object Number]
[object String]
[object Boolean]
[object Undefined]
[object Null]
[object Object]
[object Array]
[object Date]
[object Error]
[object RegExp]
[object Function]

还有：

onsole.log(Object.prototype.toString.call(Math)); 
// [object Math]
console.log(Object.prototype.toString.call(JSON)); 
// [object JSON]
---------------------------------------------------
function a() {
  console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}
a();

所以我们可以识别至少 14 种类型，当然我们也可以算出来，[[class]] 属性至少有 12 个。

type API

既然有了 Object.prototype.toString 这个神器！那就让我们写个 type 函数帮助我们以后识别各种类型的值吧！
写一个 type 函数能检测各种类型的值，如果是基本类型，就使用 typeof，引用类型就使用 toString。此外鉴于 typeof 的结果是小写，我也希望所有的结果都是小写。

考虑到实际情况下并不会检测 Math 和 JSON，所以去掉这两个类型的检测。
我们来写一版代码：

var class2Type = {}
// 生成class2type映射
"Boolean Number String Function Array Date RegExp Object Error Null Undefined".split(" ").map(function(item, index) {
    class2type["[object " + item + "]"] = item.toLowerCase();
})
function type(obj) {
  return typeof obj ==='object' || typeof obj ==='function'?
class2type[Object.prototype.toString.call(obj)] || 'object' : typeof obj;
}

嗯，看起来很完美的样子~~ 但是注意，在 IE6 中，null 和 undefined 会被 Object.prototype.toString 识别成 [object Object]！

我去，竟然还有这个兼容性！有什么简单的方法可以解决吗？那我们再改写一版，绝对让你惊艳！

var class2type = {}
"Boolean Number String Function Array Date RegExp Object Error".split(" ").map(function(item, index) {
  class2type["[object"+item+"]"] = item.toLowerCase();
})

function type(obj) {
  if(obj == null) {
     return obj+"";
  }else {
     return typeof obj === "object" || typeof obj === "function" ?
        class2type[Object.prototype.toString.call(obj)] || "object" :
        typeof obj;
  }
}

isFunction

有了 type 函数后，我们可以对常用的判断直接封装，比如 isFunction:

function isFunction(obj) {
  return type(obj) ==='function';
}

彩蛋：

image.png

回答：
bject.toString是将Object作为一个对象访问，Object自身没有属性toString，toString在Object的原型链上，Object.proto===Funtion.prototype，toString是Function.prototype的一个属性

image.png

MDN中说，Function 对象覆盖了从 Object 继承来的 Object.prototype.toString 方法。函数的 toString 方法会返回一个表示函数源代码的字符串。具体来说，包括 function关键字，形参列表，大括号，以及函数体中的内容。若 this 不是 Function 对象，则 toString() 方法将抛出 TypeError异常

image.png

彩蛋二：
判定方法基本是四种方法：

typeof
constructor
instanceof
Object.prototype.toString
对于数组类型，还有 Array.isArray 可以用于判断

🙋‍♀️加油~