[TOC]
前言
最近看了一篇文章,说是关于‘[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)
总结
仅为记忆所写,得不到的永远是最美好的
爱代码,爱生活!