JavaScript 检测复杂类型

2017-12-29

摘要：学习冴羽的博客检测复杂类型

plainObject

plainObject来自于jQuery，通过{}与new Object创建的对象和没有原型的对象被认为是 plainObject ——纯粹的对象，可以区别用 typeof 都会返回 object 的 null、数组、宿主对象（documents）等

// 用来存放 toString 映射结果的对象
var class2type = {};
// 相当于 Object.prototype.toString
var toString = class2type.toString;
// 相当于 Object.prototype.hasOwnProperty
var hasOwn = class2type.hasOwnProperty;
function isPlainObject(obj) {
  var proto, Ctor;
  // 将明显不是对象的简单类型和借用 toString 方法判断 obj 的类型是不是 Object 的排除
  if (!obj || toString.call(obj) !== "[object Object]") {
    return false;
  }
  // 获取原型
  proto = Object.getPrototypeOf(obj);
  // 没有原型的是纯粹的对象返回true，像Object.create(null)
  if (!proto) {
    return true;
  }
  // 尝试获取对象的 constructor 属性，如果是构造函数 Object，说明是由构造函数 Object 直接创建的返回 true
  Ctor = hasOwn.call(proto, "constructor") && proto.constructor;
  // toString调用的是 Function.prototype.toString。因为 hasOwn.toString 就是 class2type.hasOwnProperty.toString，class2type.hasOwnProperty 是一个函数方法，其原型的 toString 便是 Function.prototype.toString
  return typeof Ctor === "function" && hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object);
}

toString 方法和原型关系参考Object对象和原型及原型链

空对象

jQuery 中 isEmptyObject 方法用来判断是否是空对象

function isEmptyObject(obj) {
  var name;
  // for循环一旦执行，就说明有属性，有属性就会返回false。name属性只是被“读取”但没有被“使用”
  for (name in obj) {
    return false;
  }
  return true;
}

不止空对象返回 true，还有如 null、undefined、数字、布尔值、空字符串、空数组在chrome下也会返回 true，其他浏览器表现不一

window对象

window 对象有一个 window 属性指向自身，由此可以判断 window 对象。也可以使用 type 函数用 tostring 来判断，但是各个浏览器显示并不一致

1
2
3

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

DOM元素

判断是不是 DOM 元素

1
2
3

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

（类）数组

判断数组和类数组

function isArrayLike(obj) {
  // 必须有length属性
  var length = !!obj && "length" in obj && obj.length;
  var typeRse = type(obj);
  // 排除function和window
  if (typeRes === "function" || isWindow(obj)) {
    return false;
  }
  return typeRes === "array" || length === 0 || typeof length === "number" && length > 0 && (length - 1) in obj;
}

注意最后返回true的三种情况：
1.类型为 array 的肯定是数组
2.length 属性值为0的对象，包括空的 arguments 对象
3.length 属性值的类型为 number，且最后一个元素obj[length - 1]存在的类数组