浅谈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 相关文章推荐
基于jquery实现等比缩放图片
Dec 03 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
探索node之事件循环的实现
Oct 30 Javascript
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开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
PHP多态代码实例
2015/06/26 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
javascript轮播图算法
2016/10/21 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
如何通过python实现全排列
2020/02/11 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
教师四风对照检查材料思想汇报
2014/09/17 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫