浅谈javascript的数据类型检测


Posted in Javascript onJuly 10, 2010

一、javascript的数据
javascript的数据分为两种:简单数据和复杂数据。简单数据包含number,string,boolean,undefined和null这五种;复杂数据只有一种即object。【此处友情鸣谢李战老师,<<悟透JavaScript>>写得太传神,印象太深刻了】

二、javascript的数据类型检测
1、万能的typeof
我们先测试一下通过typeof来获取简单数据类型。什么也别说了,上代码是王道:

// 获取变量obj的数据类型 
function getType(obj) { 
return typeof (obj); 
} 
/*常量获取类型*/ 
alert(getType(1)); //number 
alert(getType("jeff wong")); //string 
alert(getType(true)); //boolean 
alert(getType(undefined)); //undefined 
alert(getType(null)); //object 
/*变量获取类型*/ 
var num = 1; 
var str = "jeff wong"; 
var flag = true; 
var hell = undefined; 
var none = null; 
alert(getType(num)); //number 
alert(getType(str)); //string 
alert(getType(flag)); //boolean 
alert(getType(hell)); //undefined 
alert(getType(none)); //object

正如你所看到的那样,通过typeof运算符,前面四个简单数据类型完全在意料之中,但是typeof null却返回object。应该注意到,null是null类型的唯一值,但null并不是object,具有null值的变量也并非object,所以直接通过typeof,并不能正确得到null类型。 要正确获取简单数据类型,只要在getType的地方加点改进就可以了:
function getType(obj) { 
return (obj === null) ? "null" : typeof (obj); 
}

接着来试一下复杂数据类型object:
function Cat() { 
} 
Cat.prototype.CatchMouse = function () { 
//do some thing 
} 
// 获取变量obj的数据类型 
function getType(obj) { 
return (obj === null) ? "null" : typeof (obj); 
} 
var obj = new Object(); 
alert(getType(obj)); //object 
var func = new Function(); 
alert(getType(func)); //function 
var str = new String("jeff wong"); 
alert(getType(str)); //object 
var num = new Number(10); 
alert(getType(num)); //object 
var time = new Date(); 
alert(getType(time)); //object 
var arr = new Array(); 
alert(getType(arr)); //object 
var reg = new RegExp(); 
alert(getType(reg)); //object 
var garfield = new Cat(); 
alert(getType(garfield)); //object

我们看到,除了Function(请注意大小写)返回了function,不管是javascript的常见内置对象Object,String或者Date等等,还是自定义function,通过typeof返回的无一例外,通通都是object。但是对于自定义function,我们更愿意得到它的“庐山真面目”(示例中即Cat,而非object),而显然,typeof不具备这种转换处理能力。
2、constructor,想大声说爱你
既然万能的typeof也有无解的时候,那么我们怎么判断一个变量是否是自定义的function实例呢?我们知道,javascript的所有对象都有一个constructor属性,这个属性可以帮我们判断object数据类型,尤其是对自定义function同样适用:
var obj = "jeff wong"; 
alert(obj.constructor == String); //true 
obj = new Cat(); 
alert(obj.constructor == Cat); //true

但是,下面的代码您也可以测试一下:
//alert(1.constructor); //数字常量 出错 数字常量无constructor 
var num = 1; 
alert(num.constructor == Number); //true 
alert("jeff wong".constructor == String); //true 
var str = "jeff wong"; 
alert(str.constructor == String); //true 
var obj= null; 
alert(obj.constructor); //null没有constructor属性 
none = undefined; 
alert(obj.constructor); //undefined没有constructor属性

实验证明,数字型常量,null和undefined都没有constructor属性。
到这里,您会和楼猪一样庆幸认为终于大功告成了吗?下面的代码或许还能有点启发和挖掘作用:
function Animal() { 
} 
function Cat() { 
} 
Cat.prototype = new Animal(); 
Cat.prototype.CatchMouse = function () { 
//do some thing 
} 
var obj = new Cat(); 
alert(obj.constructor == Cat); //false ?? 
alert(obj.constructor == Animal); //true 理解

原来对于原型链继承的情况,constuctor也不那么好使了。那怎么办?
3、直观的instanceof
嘿嘿,有请instanceof隆重登场。看它的命名,好像是获取某一个对象的实例,也不知这样理解对不对?不管怎样,我们还是动手改进上面的代码测试一下先:
function Animal() { 
} 
function Cat() { 
} 
Cat.prototype = new Animal(); 
Cat.prototype.CatchMouse = function () { 
//do some thing 
} 
var garfield = new Cat(); 
alert(garfield instanceof Cat); //true 毫无疑问 
alert(garfield instanceof Animal); //true 可以理解

好了,关于javascript的数据类型检测,楼猪就大致总结介绍到这里了。希望有心的高人补充。
Javascript 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
jquery nth-child()选择器的简单应用
Jul 10 #Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 #Javascript
加载jQuery后$冲突的解决办法
Jul 09 #Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 #Javascript
jquery multiSelect 多选下拉框
Jul 09 #Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 #Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 #Javascript
You might like
php教程之phpize使用方法
2014/02/12 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
基于jquery的滑动样例代码
2010/11/20 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
Javascript继承机制详解
2017/05/30 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
深入解析Python中的urllib2模块
2015/11/13 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
Scrapy框架使用的基本知识
2018/10/21 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
django queryset相加和筛选教程
2020/05/18 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
给排水专业应届生求职信
2013/10/12 职场文书
森林防火宣传标语
2014/06/27 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
优秀高中学生评语
2014/12/30 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书