JavaScript 检测类型

2017-12-17

摘要：JavaScript检测类型，参考冴羽的博客再次修改
typeof 适合基本类型及 function 检测，遇到 null 有 bug ；
instanceof 测某个对象的原型链是否包含某个构造函数的 prototype 属性（基本类型没有原型链），它是基于原型链运作的；
constructor 指向的是最初创建者，而且容易伪造，不适合做类型判断；
toString 适合检测基本类型和内置对象

示例

// typeof
var a = "niuxiaokui"; // string
var b = true; // boolean
var c = 23; // number
var d; // undefined
var e = null; // object，这是一个bug
var f = new Object(); // object
var g = new Array(); // object
var h = function () { };// function

// instanceof
[1, 2, 3] instanceof Array // true
/abc/ instanceof RegExp // true
({}) instanceof Object // true
(function () { }) instanceof Function // true

// toString
Object.prototype.toString.call(1); // [object Number]
Object.prototype.toString.call(true); // [object Boolean]
Object.prototype.toString.call(''); // [object String]
Object.prototype.toString.call(null); // [object Null]
Object.prototype.toString.call(undefuned); // [object Undefined]
Object.prototype.toString.call([]); // [object Array]
Object.prototype.toString.call({}); // [object Object]
Object.prototype.toString.call(function () { }); // [object Function]
Object.prototype.toString.call(/test/i); // [object RegExp]
Object.prototype.toString.call(new Date()); // [object Date]
Object.prototype.toString.call(new Error()); // [object Error]
Object.prototype.toString.call(Math); // [object Math]
Object.prototype.toString.call(JSON); // [object JSON]
Object.prototype.toString.call(window) // [object Window] 不同浏览器显示不一致
(function () {
  console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
})()

当toString方法被调用的时候，下面的步骤会被执行：
1.如果this值是undefined，就返回[object Undefined]
2.如果this的值是null，就返回[object Null]
3.让O成为ToObject(this)的结果
4.让class成为O的内部属性[[Class]]的值
5.最后返回由 “[object “ 和 class 和 “]” 三个部分组成的字符串
注意：在IE6中（还有用IE6的吗），null和undefined会被Object.prototype.toString识别成[object Object]

封装检测函数

写一个能检测各种类型的函数type，如果是基本类型，就使用typeof检测，引用类型就使用toString检测。鉴于typeof 的结果是小写，希望所有的结果都是小写

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) { // undefined、null
    return obj + "";
  }
  return typeof obj === "object" || typeof obj === "function" ? class2type[Object.prototype.toString.call(obj)] || "object" : typeof obj;
}

可以对常用的判断直接封装，比如isFunction:

1
2
3

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

如此理解axis.js就更容易了:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else if (typeof exports === 'object') {
    module.exports = factory();
  } else {
    root.axis = factory();
  }
}(this, function () {
  'use strict';
  var axis = {};
  var types = 'Array Object String Date RegExp Function Boolean Number Null Undefined'.split(' ');
  function type() {
    return Object.prototype.toString.call(this).slice(8, -1);
  }
  for (var i = types.length; i--;) {
    axis['is' + types[i]] = (function (self) {
      return function (elem) {
        return type.call(elem) === self;
      };
    })(types[i]);
  }
  return axis;
}));

使用方法：

axis.isArray([]); // true 
axis.isObject({}); // true 
axis.isString(''); // true 
axis.isDate(new Date()); // true 
axis.isRegExp(/test/i); // true 
axis.isFunction(function () {}); // true 
axis.isBoolean(true); // true 
axis.isNumber(1); // true 
axis.isNull(null); // true 
axis.isUndefined(); // true

参考：
JavaScrit的变量：如何检测变量类型
 JavaScript深入浅出