浅谈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打造TabPanel效果代码
May 22 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
JS中作用域以及变量范围分析
Jul 18 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
微信小程序实现底部弹出框
Nov 18 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与ASP
2006/10/09 PHP
PHP中函数内引用全局变量的方法
2008/10/20 PHP
定义php常量的详解
2013/06/09 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php获取字段名示例分享
2014/03/03 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
取得传值的函数
2006/10/27 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
在Python下尝试多线程编程
2015/04/28 Python
python操作redis方法总结
2018/06/06 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
购房协议书
2014/04/11 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
高一军训决心书
2015/02/05 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
Python实现简单得递归下降Parser
2022/05/02 Python