曾经我以为JavaScript中的类型检测只要使用 typeof 或 instanceof 就可以通通解决。后来我发现我是too young too naive啊!早说过JavaScript是个不严密,有缺陷的语言,通过类型检测才深深地领悟到这一点。接下来我就来剖析下这里面的漏洞及最靠谱的检测方法吧!

一、typeof运算符

    相信很多同学还跟我曾经以为的一样,typeof操作符只是判断对象类型上不太靠谱,它还是可以用来检测原始值类型的,比如数字、字符串、布尔型。但看了下面的例子你就不这么认为了。

typeof 'foo'                 //  'string'
typeof new String('foo') // 'object' typeof 2 // 'number'
typeof new Number(2) // 'object' typeof true // 'boolean'
typeof new Boolean(true) // 'object'

 

    看出来了么,都是同样的值,如果用构造函数来创建原始值那么用typeof检测的结果就都是’object’!这显然不是我们想要的结果。

二、instanceof运算符

    那有人说了,typeof沦陷了,我们还有instanceof啊,可是别忘了 instanceof本质上是检测引用类型的原型链的,所以对原始值就根本没有作用。例如:

'foo' instanceof String     // false
'foo' instanceof Object // false new String('foo') instanceof String //true
new String('foo') instanceof Object //true

 

    看到了吧,还是不靠谱。

    好吧,让instanceof做不属于它的工作是对它不太公平啦!那让它检测引用类型呢?其实它检测引用类型也有一个严重的限制: 不能跨帧使用。

    假设一个浏览器帧A(frame A)里的一个对象被传入到帧B(frame B)中,两个帧中都定义了Person构造函数,如果来自帧A 的对象是帧A 中Person的实例,则有:

personA instanceof frameAPerson   //true
personA instanceof frameBPerson //false

 

    因为每个帧都有Person的拷贝,它被认为是该帧中的Person的拷贝实例,尽管两个定义是一样的。

    同样的问题也出现在其他两个非常重要的内置类型中:数组和函数,所以检测这两个内置类型一般不用instanceof。

    而且instanceof对于对象的整个原型链都能检测到,例如:

var now = new Date();

now instanceof Date;    //true
now instanceof Object; //true

    因此,用instanceof检测某一对象是否属于特定类型并非最佳。

三、最佳方法

    typof和instanceof已经都被否决了,那么最靠谱的检测方法是什么呢?

    对于JS的内部类型如Number, String, Boolean, Array, Function, Object, RegExp, Date, Error, Math, JSON可以调用Object的内部方法toString, 它可以返回一下格式的信息:’[object ‘+ type + ‘]’,例如:

Object.prototype.toString.call('foo') === '[object String]';  //true
Object.prototype.toString.call([1,2,3]) === '[object Array]'; //true

 

    用这个方法判断以上给出的类型,不管任何浏览器都会返回一样的格式,而且满足跨帧要求。

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

  1. 谈谈JavaScript类型检测

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

  2. Javascript类型检测

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

  3. javascript 类型检测

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

  4. JavaScript 类型 检测

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

  5. 类型检测汇总!typeof 和 instanceof 和isArray

    , ]; alert(arr instanceof Array);//true 以上老方法判断是否是数组,存在一个问题,就是它只适用于单执行环境(窗口),如果该窗口有其他框架(比如 iframe)则会 ...

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

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

  7. JavaScript——类型检测

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

  8. javascript类型与类型检测

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

  9. 小结 javascript中的类型检测

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

随机推荐

  1. requesth获取参数

    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) t ...

  2. windows版mongodb不知道安装在哪儿

    情景还原: 从官网:点击打开链接 下载了 MongoDB-win32-x86_64-2.6.12-signed.msi文件后, 右键安装,各种Next后,没有选择路径,就安装结束了!! 任务管理器里面 ...

  3. 编译gcc5.1.0时的报错

    编译安装gcc5.1.0时出现如下报错: configure: error: error verifying int64_t uses long long 这是由于没有安装gcc_c++导致的,安装下 ...

  4. AlphaTesting

    [Alpha Testing] The alpha test is a last chance to reject a pixel from being written to the screen. ...

  5. VUE+WebPack游戏设计:'乘法防线'游戏设计

  6. linux: 空指令(:)

    :指令 描述: 空命令,除了参数替换和重定向外不执行任何操作,总是保证退出码为0. eg1:创建文件(不需要调用其它程序,速度更快) :>/path/to/file 测试: 创建10000个不存 ...

  7. 【LA3126 训练指南】出租车 【DAG最小路径覆盖】

    题意 你在一座城市里负责一个大型活动的接待工作.明天将有m位客人从城市的不同的位置出发,到达他们各自的目的地.已知每个人的出发时间,出发地点和目的地.你的任务是用尽量少的出租车送他们,使得每次出租车接 ...

  8. qt的exe文件查找依赖的dll

    用qtcreater编译完工程生成的exe文件往往会依赖dll文件.如何一次定位exe文件所以依赖的所有dll文件呢,今天发现了软件叫hap-depends. 截图如下: 用这个软件打开exe文件就会 ...

  9. 面向对象 继承 抽象类 接口 static 权限修饰符

    Day01 面向对象 继承 抽象类 接口 static 1.匿名对象是指创建对象时,只有创建对象的语句,却没有把对象地址值赋值给某个变量. 2.类的继承是指在一个现有类的基础上去构建一个新的类,构建出 ...

  10. 关于oraclize使用最好的一篇文章

    https://medium.com/@msolomon44/using-apis-in-your-ethereum-smart-contract-with-oraclize-95656434292e ...