JavaScript专题之类型判断(下)

JavaScript专题系列第五篇，讲解更加复杂的类型判断，好比 plainObject、空对象、类数组对象、Window对象、DOM 元素等

前言

在上篇《JavaScript专题之类型判断(上)》中，咱们抄袭 jQuery 写了一个 type 函数，能够检测出常见的数据类型，然而在开发中还有更加复杂的判断，好比 plainObject、空对象、Window 对象等，这一篇就让咱们接着抄袭 jQuery 去看一下这些类型的判断。

plainObject

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

之因此要判断是否是 plainObject，是为了跟其余的 JavaScript对象如 null，数组，宿主对象（documents）等做区分，由于这些用 typeof 都会返回object。

jQuery提供了 isPlainObject 方法进行判断，先让咱们看看使用的效果：

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 版本下的 isPlainObject，咱们直接看源码：

// 上节中写 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);
}复制代码

注意：咱们判断 Ctor 构造函数是否是 Object 构造函数，用的是 hasOwn.toString.call(Ctor)，这个方法可不是 Object.prototype.toString，不信咱们在函数里加上下面这两句话：

console.log(hasOwn.toString.call(Ctor)); // function Object() { [native code] }
console.log(Object.prototype.toString.call(Ctor)); // [object Function]复制代码

发现返回的值并不同，这是由于 hasOwn.toString 调用的实际上是 Function.prototype.toString，毕竟 hasOwnProperty 但是一个函数！

并且 Function 对象覆盖了从 Object 继承来的 Object.prototype.toString 方法。函数的 toString 方法会返回一个表示函数源代码的字符串。具体来讲，包括 function关键字，形参列表，大括号，以及函数体中的内容。

EmptyObject

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

function isEmptyObject( obj ) {

        var name;

        for ( name in obj ) {
            return false;
        }

        return true;
}复制代码

其实所谓的 isEmptyObject 就是判断是否有属性，for 循环一旦执行，就说明有属性，有属性就会返回 false。

可是根据这个源码咱们能够看出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复制代码

以上都会返回 true。

可是既然 jQuery 是这样写，多是由于考虑到实际开发中 isEmptyObject 用来判断 {} 和 {a: 1} 是足够的吧。若是真的是只判断 {}，彻底能够结合上篇写的 type 函数筛选掉不适合的状况。

Window对象

Window 对象做为客户端 JavaScript 的全局对象，它有一个 window 属性指向自身，这点在《JavaScript深刻之变量对象》中讲到过。咱们能够利用这个特性判断是不是 Window 对象。

function isWindow( obj ) {
    return obj != null && obj === obj.window;
}复制代码

isArrayLike

isArrayLike，看名字可能会让咱们以为这是判断类数组对象的，其实不只仅是这样，jQuery 实现的 isArrayLike，数组和类数组都会返回 true。

由于源码比较简单，咱们直接看源码：

function isArrayLike(obj) {

    // obj 必须有 length属性
    var length = !!obj && "length" in obj && obj.length;
    var typeRes = type(obj);

    // 排除掉函数和 Window 对象
    if (typeRes === "function" || isWindow(obj)) {
        return false;
    }

    return typeRes === "array" || length === 0 ||
        typeof length === "number" && length > 0 && (length - 1) in obj;
}复制代码

重点分析 return 这一行，使用了或语句，只要一个为 true，结果就返回 true。

因此若是 isArrayLike 返回true，至少要知足三个条件之一：

1. 是数组
2. 长度为 0
3. lengths 属性是大于 0 的数组，而且obj[length - 1]必须存在

第一个就不说了，看第二个，为何长度为 0 就能够直接判断为 true 呢？

那咱们写个对象：

var obj = {a: 1, b: 2, length: 0}复制代码

isArrayLike 函数就会返回 true，那这个合理吗？

回答合不合理以前，咱们先看一个例子：

function a(){
    console.log(isArrayLike(arguments))
}
a();复制代码

若是咱们去掉length === 0 这个判断，就会打印 false，然而咱们都知道 arguments 是一个类数组对象，这里是应该返回 true 的。

因此是否是为了放过空的 arguments 时也放过了一些存在争议的对象呢？

第三个条件：length 是数字，而且 length > 0 且最后一个元素存在。

为何仅仅要求最后一个元素存在呢？

让咱们先想下数组是否是能够这样写：

var arr = [,,3]复制代码

当咱们写一个对应的类数组对象就是：

var arrLike = {
    2: 3,
    length: 3
}复制代码

也就是说当咱们在数组中用逗号直接跳过的时候，咱们认为该元素是不存在的，类数组对象中也就不用写这个元素，可是最后一个元素是必定要写的，要否则 length 的长度就不会是最后一个元素的 key 值加 1。好比数组能够这样写

var arr = [1,,];
console.log(arr.length) // 2复制代码

可是类数组对象就只能写成：

var arrLike = {
    0: 1,
    length: 1
}复制代码

因此符合条件的类数组对象是必定存在最后一个元素的！

这就是知足 isArrayLike 的三个条件，其实除了 jQuery 以外，不少库都有对 isArrayLike 的实现，好比 underscore:

var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;

var isArrayLike = function(collection) {
    var length = getLength(collection);
    return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};复制代码

isElement

isElement 判断是否是 DOM 元素。

isElement = function(obj) {
    return !!(obj && obj.nodeType === 1);
};复制代码

结语

这一篇咱们介绍了 jQuery 的 isPlainObject、isEmptyObject、isWindow、isArrayLike、以及 underscore 的 isElement 实现。咱们能够看到，即便是 jQuery 这样优秀的库，一些方法的实现也并非很是完美和严密的，可是最后为何这么作，其实也是一种权衡，权衡所失与所得，正如玉伯在《从 JavaScript 数组去重谈性能优化》中讲到：

全部这些点，都必须脚踏实地在具体应用场景下去分析、去选择，要让场景说话。

专题系列

JavaScript专题系列目录地址：github.com/mqyqingfeng…。

JavaScript专题系列预计写二十篇左右，主要研究平常开发中一些功能点的实现，好比防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等，特色是研(chao)究(xi) underscore 和 jQuery 的实现方式。

若是有错误或者不严谨的地方，请务必给予指正，十分感谢。若是喜欢或者有所启发，欢迎 star，对做者也是一种鼓励。