javascript内置的类型检测机制并非完全可靠。比如typeof操作符,并不能准确的判断数据是哪个类型,比如:数组和对象就不能通过typeof来区分。

typeof [] ==="object" ; // true
typeof {} === "object"; // true

但是typeof用来区别对象与基本数据类型时就比较有用了。

基本数据类型检测

由于typeof对所有对象和数组类型返回的都是"object",所以它在区别对象与基本数据类型时才有用。一个值使用typeof操作符可能返回下列某个字符串,注意是字符串:

"undefined"表示这个值未定义

"boolean"表示这个值是布尔值

"string"表示这个值是字符串

"number"表示这个值是数值

"object"表示这个值是对象或null(注意:typeof null 将返回"object",不能准确地判断类型的合法性,因此不能用typeof来检测对象类型。)

"function"表示这个值是函数(注意:Safari第四版在对正则表达式使用typeof操作符时回返回"function",因此很难确定这个值到底是不是函数。)

引用类型检测

JavaScript引用类型有:Object、Array、Date、Error、RegExp、Function、基本包装类型(Boolean类型、Number类型、String类型)、单体内置对象(Global对象、Math对象)等。检测引用类型可以使用 instanceof 和 Object.toString()方法。

instanceof 运算符

instanceof运算符要求其左边的运算数是一个对象,右边的运算数则是对象类的名字。如果该运算符的左边的对象是右边类的一个实例,则返回true,否则返回false。例如:

var d = new Date();

d instanceof Date; // true
d instanceof Object; // true
d instanceof Number ; //false var a = [];
a instanceof Array ; // true
a instanceof Object; // true
a instanceof RegExp; // false

但是利用instanceof 操作符确定某个对象是不是数组会有些问题,例如:

if( value instanceof Array ) {
// do something
}

instanceof 操作符的问题在于,它假定只有一个全局执行环境。如果网页中包含多个框架,那其实就存在两个以上不同的全局执行环境,从而存在两个以上不同的Array构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组就会分别具有各自的不同的构造函数。因此在第二个框架对传入的数组执行 value instanceof Array 就会返回false了,因为构造函数是不一样的。

Object.toString()检测对象类型

在任何值上调用原生的toString()方法,都会返回一个[object nativeConstructorName] 格式的字符串。每个类在内部都会有一个[[Class]]属性,这个属性就指定上述字符串中的构造函数名。例如:

// 检测数组类型
function isArray(value){
return Object.prototype.toString.call(value) == "[object Array]"
} // 检测函数
function isFunction(value){
return Object.prototype.toString.call(value) == "[object Function]"
} // 检测正则表达式
function isRegExp(value){
return Object.prototype.toString.call(value) == "[object RegExp]"
}

注意:对于在IE中以COM对象形式实现的任何函数,isFunction() 都将返回false,因为它们并非原生的JavaScript函数。

jQuery检测对象类型也是用到了toString()方法,查看type()方法的实现可以看到:

//version:jquery-1.11.3

var class2type = {};
// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
class2type[ "[object " + name + "]" ] = name.toLowerCase();
});
type: function( obj ) {
if ( obj == null ) {
return obj + "";
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[ toString.call(obj) ] || "object" :
typeof obj;
}

通过定义一个class2type对象把所有类型的toString()返回值通过键值对存储起来。在调用type方法时通过toString()方法返回值进行匹配,最后返回检测值的类型。

总结

在区别基本数据类型和对象类型时可以使用typeof运算符,对于对象的类型确定通常使用原生toString()检测,注意Object.prototype.toString() 本身也可能被修改。

以上是JavaScript类型检测的一些基础知识总结,干货不多,望各位大神指教,欢迎留言讨论。

谈谈JavaScript类型检测的更多相关文章

  1. Javascript类型检测

    原地址 http://www.cnblogs.com/fool/archive/2010/10/07/javascrpt.html 开门见山,我们先来看一下代码: var is = function ...

  2. javascript 类型检测

    javascript数据类型分为简单数据类型和复杂数据类型.简单数据类型分为string,number,boolean,defined,null,复杂数据类型为Object.类型检测在写代码可能会非常 ...

  3. JavaScript类型检测汇总

        曾经我以为JavaScript中的类型检测只要使用 typeof 或 instanceof 就可以通通解决.后来我发现我是too young too naive啊!早说过JavaScript是 ...

  4. JavaScript 类型 检测

    前言 ECMAScript中有5种数据类型,分别为Number,Boolean,Null,Undifined和String,以及一种复杂的数据类型Object(由名值对组成,是这门语言所有对象的基础类 ...

  5. JavaScript类型检测, typeof操作符与constructor属性的异同

    *#type.js function Person(name, age) { this.name = name; this.age = age; } var d = {an: 'object'}; v ...

  6. JavaScript——类型检测

    要检测一个变量是否是基本数据类型,可以用 Typeof 操作符.如果我们想知道它是什么类型的对象,我们可以用instanceof 操作符,语法如下所示: result=variable instanc ...

  7. javascript类型与类型检测

    1.javascript类型: 注:包装对象:如"hello".length实际为js为我们隐式创建了一个String临时对象,去调用该对象的length属性,调用过后再将该临时对 ...

  8. 小结 javascript中的类型检测

    先吐槽一下博客园的编辑器,太不好用了,一旦粘贴个表格进来就会卡死,每次都要用html编辑器写,不爽! 关于javascript的类型检测,早在实习的时候就应该总结,一直拖到现在,当时因为这个问题还出了 ...

  9. JavaScript的三种类型检测typeof , instanceof , toString比较

    1.typeof typeof是js的一个操作符,在类型检测中,几乎没有任何用处. typeof 返回一个表达式的数据类型的字符串,返回结果为javascript中的基本数据类型,包括:number. ...

随机推荐

  1. c#连接mysql环境配置

    写.net的时候一直用的都是sql sever,mysql小 有命令行方便就想试了一下,网上搜很久,下载很多配置文件都不成功.昨晚上搞到两点多,冒着生命危险. 后来终于在一个网站上找到这个 MySQL ...

  2. C/C++定义全局变量/常量几种方法的区别

    在讨论全局变量之前我们先要明白几个基本的概念: 1. 编译单元(模块):    在IDE开发工具大行其道的今天,对于编译的一些概念很多人已经不再清楚了,很多程序员最怕的就是处理连接错误(LINK ER ...

  3. offsetTop、clientTop、scrollTop、offsetTop

    好好看看下面那张图,基本上就没啥问题了! scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop ...

  4. Azure ARM (10) ARM模式下的虚拟机和Classic Model虚拟机的区别

    <Windows Azure Platform 系列文章目录> 本文内容比较多,请大家仔细阅读,谢谢! 请读者注意,在Azure ARM平台,有两种虚拟机模式:经典虚拟机和ARM虚拟机 A ...

  5. Windows Azure HandBook (3) 浅谈Azure安全性

    <Windows Azure Platform 系列文章目录> 2015年3月5日-6日,参加了上海的Azure University活动.作为桌长与微软合作伙伴交流了Azure相关的技术 ...

  6. APP数据接口开发的一些经验

    刚接到这样的任务时,没有感觉到任何压力,不就是给移动端应用提供数据吗?那边发来参数,这边处理数据,返回JSON.做网站开发时经常使用ajax请求后台数据,不就是这么回事吗.于是,在确认完需求后就开始干 ...

  7. 使用Python对Excel表格进行简单的读写操作(xlrd/xlwt)

    算是一个小技巧吧,只是进行一些简单的读写操作.让人不爽的是xlrd和xlwt是相对独立的,两个模块的对象不能通用,读写无法连贯操作,只能单独读.单独写,尚不知道如何解决. #①xlrd(读) #cod ...

  8. c# 打开指定的网址

    System.Diagnostics.Process.Start(url);

  9. Dapper小型ORM的使用(随便吐槽下公司)

    近来公司又有新项目要做,之前做项目用过蛮多ORM,包括ef,NetTiers,ServiceStack.OrmLite等ROM,每种ORM都有一定的坑(或者说是使用者的问题吧~~).用来用去都觉的有一 ...

  10. Asp.net Mvc模块化开发之“部分版本部分模块更新(上线)”

    项目开发从来就不是一个简单的问题.更难的问题是维护其他人开发的项目,并且要修改bug.如果原系统有重大问题还需要重构. 怎么重构系统不是本文探讨的问题,但是重构后如何上线部署和本文关系密切.这个大家可 ...