简述js来判断数据类型

前言

技术还原
一. 使用Object.prototype.toString.call()方法产生结果进行判断
1>. 判断5种基本数据类型

2>. 判断3种引用类型

二. 使用typeof来判断js的数据类型
1>. 判断5种基本数据类型

2>.判断三种引用类型

三. 使用instanceof来判断数据类型

总结

前言

​ 最近看了一篇文章，说是关于‘[object Object]，[object Function]’等相关用词，偶尔一想以前项目开发也是遇到这种情况，譬如请求的数据也没具体分析是什么类型的数据，就直接使用toString将其序列化就会导致上述打印的报错或者提示信息，其实根据打印我们很是容易分析出来并将其更正过来，不会影响开发进程。但项目完成阶段，还是想看着这些‘屌炸天’的打印是怎么导致的，有什么作用。大佬很多，自己也学到了一些皮毛，但还是想利用闲的时光来梳理自己认知的东西（闲的慌）。利用譬如：‘[object Object]，[object Function]，[object Null]’等来判断js的8种数据类型，不是同以往的typeof或者instanceof来判断数据类型。

技术还原

一. 使用Object.prototype.toString.call()方法产生结果进行判断

1>. 判断5种基本数据类型

console.log(Object.prototype.toString.call(12)); //[object Number]
console.log(Object.prototype.toString.call('12')); // [object String]
console.log(Object.prototype.toString.call(true)); // [object Boolean]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(null)); // [object Null]

调用Object构造函数的原型中toString方法，这里面的call解决了谁调用的问题，call或者apply常用改变指针的指向，简单来说就是它们调用原型中toString方法，通过上次简单代码打印，结果格式都是[object …]，而且都是截然不同的。这三种是js中基本数据类型，下面来看看引用类型的结果—>

2>. 判断3种引用类型

var arr = ['12','as'];
var obj = {
name: 'yy',
age: 26,
gender: 'man'
};
var fn = function () {
console.log('hello world!');
};

console.log(Object.prototype.toString.call(arr)); //[object Array]
console.log(Object.prototype.toString.call(obj)); // [object Object]
console.log(Object.prototype.toString.call(fn)); // [object Function]

上述代码打印结果，都是截然不同，因此完成可以通过使用这种方法来判断js数据类型，我们可以不在拘束于一些typeof，installof不太严谨的写法来判断数据结构类型

二. 使用typeof来判断js的数据类型

1>. 判断5种基本数据类型

console.log(typeof '12'); // string
console.log(typeof 12);  // number
console.log(typeof undefined); // underfined
console.log(typeof true); // boolean
console.log(typeof null); // object

上述代码打印，可以看出除了不能判断null这种数据类型，其它4种都是可以通过typeof来进行判断数据类型。当然我们想null为啥类型打印时’object‘呢，很神奇有趣的现象，’你不知道的JavaScript’解释，其实相对于js的bug，不过可以这么理解null是由obect派生出来的，那个bug可以看如下代码打印：

var arr = ['12','as'];
var obj = {
name: '杨毅',
age: 23,
gender: 'man'
};
var fn = function () {
console.log('hello world!');
};
console.log(arr instanceof Object); // true
console.log(obj instanceof Object); // true
console.log(fn instanceof Object); // true
console.log(null instanceof Object); // false
console.log(12 instanceof Object); // false
console.log('123' instanceof Object); // false
console.log(new Null() instanceof Object) // 报错

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上,不过也通过这个可以看出js将null归分于基本数据类型，但是无论如何使用typeof无法看出是null还是引用类型，代码如下

2>.判断三种引用类型

var arr = ['12','as'];
var obj = {
name: 'yy',
age: 25,
gender: 'man'
};
var fn = function () {
console.log('hello world!');
};
console.log(typeof arr); // object
console.log(typeof obj); // Object
console.log(typeof fn);  // function

三. 使用instanceof来判断数据类型

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。简单来说能验证new构造函数创建出来的实例，不能验证字面量创建出来的

console.log('abc' instanceof String); // false
console.log(new String('abc') instanceof String); // true
console.log(12 instanceof Number); // false
console.log(new Number(12) instanceof Number); // true
console.log(true instanceof Boolean); // false
console.log(new Boolean(true) instanceof Boolean); // true
console.log({name: 'yy'} instanceof Object); // true
console.log(new Object({name: 'yy'}) instanceof Object); // true
console.log(['12','123'] instanceof Object); // true
console.log(['12','123'] instanceof Array); // true
console.log(new Array('12',32) instanceof Object); // true
console.log(new Array('12',32) instanceof Array); // true
console.log(function () {} instanceof Object); // true
console.log(function () {} instanceof Function); // true
console.log(new Function() instanceof Function); // true
console.log(new Date() instanceof Object); // true
console.log(new RegExp instanceof Object); // true
console.log(new String('abc') instanceof Object); // true
console.log(new Number(12) instanceof Object); // true

从上述可以看出：1.字面量创建的基本类型都是不能使用instanceof来判断数据类型的，而引用类型字面量创建的又是可以使用instanceof来判断的。2.不管是基本数据类型还是引用类型的构造函数创建的实例都是派生Object的，也就是说Object处于他们的原型链之上，这是很重要的结论，因为通过原型链的理论，完全可以再Object的原型自定义方法，让其它数据类型数据共享这些方法，那样数据类型都是可以通过原型链查找使用该方法（不考虑那些实例重写这些方法）。代码如下：

Object.prototype.sayHello = function () {
alert('hello everyone!')
}
var a = 1;
a.sayHello();
var b = 'abd';
b.sayHello();
var c = true;
c.sayHello()
var d = undefined;
d.sayHello(); // 报错
var e = null;
e.sayHello(); // 报错
var f = {name: 'yy'};
f.sayHello();
var g = ['12','as']
g.sayHello();
var h = function () {};
h.sayHello()
// 另一种写发，使用call改变this指向的写法
Object.prototype.sayHello.call(a)

总结

​ 仅为记忆所写，得不到的永远是最美好的

爱代码，爱生活！