JS类型检测-笔记

1. typeof

适用于：
1. 值类型number, string, boolean, undefined, symbol
2. 函数function

不适用于：
数组array， null， object，它们三返回的都是object

var num = 1;
var str = 'abcdefg';
var bl = true;
var udf = undefined;
var sym = Symbol();
function fn() {};

typeof num; // number
typeof str; // string
typeof bl; // boolean
typeof udf; // undefined
typeof sym; // symbol
typeof fn; // function

/* ------------------ */

var arr = [1, 2, 3];
var n = null;
var obj = {};

typeof arr; // object
typeof n; // object
typeof obj; // object

当然，在某些情况下，我们可以先排除null，然后再去判断object。如：

function aa (obj) {
  // 可以遍历数组或对象
  for (var key in obj) {
    // 此处使用!!来转换obj，如果为(null,undefined,空值'',false,数字0)则为false
    if (!!obj && typeof obj[key] === 'object') {
      aa(obj[key]);
    } else {
      // do something...
      console.log('key: ' + key + ', val: ' + obj[key]);
    }
  }
}

var obj = {
  aa: [1, 2, 3, 4],
  bb: null,
  cc: {
    aaa: 1,
    bbb: 0,
    ccc: false,
    ddd: '',
  },
  dd: 0
}

aa(obj);

// 打印如下:
key: 0, val: 1
key: 1, val: 2
key: 2, val: 3
key: 3, val: 4
key: aaa, val: 1
key: bbb, val: 0
key: ccc, val: false
key: ddd, val: 
key: dd, val: 0

2. constructor 和 instanceof

constructor用来查看对象的构造函数

var bool = true;
console.log(bool.constructor == Boolean);// true
var num = 1; 
console.log(num.constructor == Number); // true
var str = 'hello';
console.log(str.constructor == String); // true

instanceof检测某个实例是否在某个对象的原型链上

var c = [];
console.log(c instanceof Object); //true
var d = 123;  // 这些 普通类型 并不是对象
console.log(d instanceof Object); //false
var str = 'hello'; //  不是对象
console.log(str instanceof Object); //false
var num = new Number(123);
console.log(num instanceof Object); // true
console.log(num instanceof Number); // true
console.log(num instanceof Array); // false
num.constructor == Object; // false
num.constructor == Number; // true

3. toString()

使用toString检测,必须使用Object.prototype.toString(),先来看看它输出什么:

console.log(Object.prototype.toString()); // [object Object]

那么如何使用toString()来进行检测呢?这里使用 call()来改变this的指向,

var bool = true;
console.log(Object.prototype.toString.call(bool)); // [object Boolean]
var num = 1;
console.log(Object.prototype.toString.call(num)); // [object Number]
var str = 'hello';
console.log(Object.prototype.toString.call(str)); // [object String]
var arr = [];
console.log(Object.prototype.toString.call(arr)); // [object Array]
var a = undefined;
console.log(Object.prototype.toString.call(a)); // [object Undefined]
var b = null;
console.log(Object.prototype.toString.call(b)); // [object Null]

可以看出，使用Object.prototype.toString.call()来检测是比较完美的，推荐使用。

封装成函数getType

function getType(value){  //基本上可以返回所有的类型，不论你是自定义还是原生
    return Object.prototype.toString.call(value).match(/\s{1}(\w+)/)[1];
}
let obj = new Object();
console.log(getType(obj)); //"Object"

关于new生成的变量的类型

new对象发生了事情：
1. 创建空对象
2. 把this指向空对象
3. 赋值
4. 方法中的this指代 new 出来的对象。

在构造函数中，一般不允许返回东西出来。 这好像是一个默认规定。如果return object、array，function， 那么new表达式返回值即使return值。否则返回的是构造函数的函数体形成的对象。

所以，new出来的东西一般是对象object，除非你在构造函数中改变返回的类型。

总结

• typeof： 适合基本类型和function检测，遇到null失效，识别为object
• toString()： 基本上可以识别所有类型，相对完美，但是在 IE6 7 8 下识别为[object object]
• instanceof： 适用于自定义对象，也可用来检测原生对象，但在不同的iframe和window间检测时失效

推荐一个js库is.js

github地址

这个库完美解决各种类型检测，如果项目中有复杂的类型检测，可以使用这个库。