JavaScript 类型判断

作者：Seiya

时间：2019年08月21日

typeof

我们都知道，在 ES6 前，JavaScript 共六种数据类型，分别是：Undefined、Null、Boolean、Number、String、Object。

然而当我们使用 typeof 对这些数据类型的值进行操作的时候，返回的结果却不是一一对应，分别是：undefined、object、boolean、number、string、object。

注意：

Null 和 Object 类型都返回了 object 字符串。尽管不能一一对应，但是 typeof 却能检测出函数类型。而且 typeof 检测引用类型的值时，也只能返回 Object。

Object.prototype.toString

当 toString 方法被调用的时候，下面的步骤会被执行：

如果 this 值是 undefined，就返回 [object Undefined]
如果 this 的值是 null，就返回 [object Null]
让 O 成为 ToObject(this) 的结果
让 class 成为 O 的内部属性 [[Class]] 的值
最后返回由 "[object " 和 class 和 "]" 三个部分组成的字符串

举例如下：

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]

由此可以看到这个 class 值就是识别对象类型的关键！正是因为这种特性，我们可以用 Object.prototype.toString 方法识别出更多类型！

那么 Object.prototype.toString 方法能够识别的类型相当多，一下列出 14 种：

var number = 1;          // [object Number]
var string = '123';      // [object String]
var boolean = true;      // [object Boolean]
var und = undefined;     // [object Undefined]
var nul = null;          // [object Null]
var obj = {a: 1}         // [object Object]
var array = [1, 2, 3];   // [object Array]
var date = new Date();   // [object Date]
var error = new Error(); // [object Error]
var reg = /a/g;          // [object RegExp]
var func = function a(){}; // [object Function]
Object.prototype.toString.call(Math); // [object Math]
Object.prototype.toString.call(JSON); // [object JSON]
Object.prototype.toString.call(arguments); // [object Arguments]

type API

既然有了 Object.prototype.toString ！我们可以写个 type 函数帮助我们以后识别各种类型的值！

基本思路：

写一个 type 函数能检测各种类型的值，如果是基本类型，就使用 typeof，引用类型就使用 toString。此外鉴于 typeof 的结果是小写，所以规定所有的结果都是小写。同时，考虑到实际情况下并不会检测 Math 和 JSON，所以去掉这两个类型的检测。

var classType = {}

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

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

isFunction

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

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

isArray

jQuery 判断数组类型，旧版本是通过判断 Array.isArray 方法是否存在，如果存在就使用该方法，不存在就使用 type 函数:

var isArray = Array.isArray || function(obj) {
  return type(obj) === "array"
}

plainObject

plainObject 来自于 jQuery，可以翻译成纯粹的对象，所谓"纯粹的对象"，就是该对象是通过 "{}" 或 "new Object" 创建的，该对象含有零个或者多个键值对。

先看看下面的示例：

function Person(name) {
    this.name = name;
}

console.log($.isPlainObject({})) // true
console.log($.isPlainObject(new Object)) // true
console.log($.isPlainObject(Object.create(null))); // true
console.log($.isPlainObject(Object.assign({a: 1}, {b: 2}))); // true
console.log($.isPlainObject(new Person('yayu'))); // false
console.log($.isPlainObject(Object.create({}))); // false

我们可以看到，除了 {} 和 new Object 创建的之外，jQuery 认为一个没有原型的对象也是一个纯粹的对象。

然后我们看看 jQuery 实现的 isPlainObject 源码（3.0版本）：

// 上面写 type 函数时，用来存放 toString 映射结果的对象
var class2type = {};

// 相当于 Object.prototype.toString
var toString = class2type.toString;

// 相当于 Object.prototype.hasOwnProperty
var hasOwn = class2type.hasOwnProperty;

function isPlainObject(obj) {
    var proto, Ctor;

    // 排除掉明显不是obj的以及一些宿主对象如Window
    if (!obj || toString.call(obj) !== "[object Object]") {
        return false;
    }

    /**
     * getPrototypeOf es5 方法，获取 obj 的原型
     * 以 new Object 创建的对象为例的话
     * obj.__proto__ === Object.prototype
     */
    proto = Object.getPrototypeOf(obj);

    // 没有原型的对象是纯粹的，Object.create(null) 就在这里返回 true
    if (!proto) {
        return true;
    }

    /**
     * 以下判断通过 new Object 方式创建的对象
     * 判断 proto 是否有 constructor 属性，如果有就让 Ctor 的值为 proto.constructor
     * 如果是 Object 函数创建的对象，Ctor 在这里就等于 Object 构造函数
     */
    Ctor = hasOwn.call(proto, "constructor") && proto.constructor;

    // 在这里判断 Ctor 构造函数是不是 Object 构造函数，用于区分自定义构造函数和 Object 构造函数
    return typeof Ctor === "function" && hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object);
}

EmptyObject

jQuery提供了 isEmptyObject 方法来判断是否是空对象，代码简单，我们直接看源码：

function isEmptyObject( obj ) {
  var name;

  for ( name in obj ) {
    return false;
  }

  return true;
}

但是根据这个源码我们可以看出isEmptyObject实际上判断的并不仅仅是空对象。举例如下：

console.log(isEmptyObject({})); // true
console.log(isEmptyObject([])); // true
console.log(isEmptyObject(null)); // true
console.log(isEmptyObject(undefined)); // true
console.log(isEmptyObject(1)); // true
console.log(isEmptyObject('')); // true
console.log(isEmptyObject(true)); // true

Window对象

Window 对象作为客户端 JavaScript 的全局对象，它有一个 window 属性指向自身，我们可以利用这个特性判断是否是 Window 对象：

function isWindow( obj ) {
  return obj != null && obj === obj.window;
}

isElement

判断是不是 DOM 元素：

isElement = function(obj) {
  return !!(obj && obj.nodeType === 1);
}

# JavaScript 类型判断

# typeof

# Object.prototype.toString

# type API

# isFunction

# isArray

# plainObject

# EmptyObject

# Window对象

# isElement