JS 数据类型判断 typeof instance constructor Object.prototype.toString.call()

1. typeof:

console.log(typeof 1);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object     []数组的数据类型在 typeof 中被解释为 object
console.log(typeof function(){});    // function
console.log(typeof {});              // object
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object     null 的数据类型被 typeof 解释为 object

typeof 会把空数组[] 和 null 解释为 object，不够准确，不过在很多时候也不影响使用

2. instanceof:

console.log(1 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false  
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true    
console.log(undefined instanceof Undefined);         // Undefined is not defined
console.log(null instanceof Null);                   // Null is not defined

我们先看一下 MDN 对于 instanceof 的描述：
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
通俗的话讲就是——某个实例的原型是否等于构造函数的prototype
举个例子：

// 定义构造函数
function C(){} 
function D(){} 

var o = new C();


o instanceof C; // true，因为 Object.getPrototypeOf(o) === C.prototype


o instanceof D; // false，因为 D.prototype 不在 o 的原型链上

上面的 1、true、'str' 检查原型链会找到 undefined，所以没有在原型链上，所以是 false
我们改造一下就可以变为 true

console.log(new Number(1) instanceof Number);                    // true
console.log(new Boolean(true) instanceof Boolean);                // true
console.log(new String('str') instanceof String);                // true

在看一下 null 、 undefined：
浏览器认为null，undefined不是构造器所以找不到

3. constructor:

console.log((1).constructor === Number);                    // true
console.log((true).constructor === Boolean);                // true
console.log(('str').constructor === String);                // true
console.log(([]).constructor === Array);                    // true
console.log((function() {}).constructor === Function);      // true
console.log(({}).constructor === Object);                   // true

用costructor来判断类型看起来是完美的，然而，如果我创建一个对象，更改它的原型，这种方式也变得不可靠了。

function Fn(){};
 
Fn.prototype=new Array();
 
var f=new Fn();
 
console.log(f.constructor===Fn);    // false
console.log(f.constructor===Array); // true

4. Object.prototype.toString.call():


console.log(Object.prototype.toString.call(1) === '[object Number]');                // true
console.log(Object.prototype.toString.call(true) === '[object Boolean]');            // true
console.log(Object.prototype.toString.call('str') === '[object String]');            // true
console.log(Object.prototype.toString.call([]) === '[object Array]');                // true
console.log(Object.prototype.toString.call(function(){}) === '[object Function]');   // true
console.log(Object.prototype.toString.call({}) === '[object Object]');               // true
console.log(Object.prototype.toString.call(undefined) === '[object Undefined]');     // true
console.log(Object.prototype.toString.call(null) === '[object Null]');               // true

结果精准的显示我们需要的数据类型。

就算我们改变对象的原型，他依然会显示正确的数据类型。

封装一个数据类型监测的柯里化函数：

function checkType(type) {
    return function(content) {
        return Object.prototype.toString.call(content) === `[object ${type}]`;
    }
}

let isNumber = checkType("Number");
let isBoolean = checkType("Boolean");
let isString = checkType("String");
let isArray = checkType("Array");
let isFunction = checkType("Function");
let isObject = checkType("Object");
let isUndefined = checkType("Undefined");
let isNull = checkType("Null");

console.log(isString("sad")); // true