前些天写js遇到了一个instanceof的坑,我们的页面中有一个iframe,我在index页面中计算得到了一个array,然后需要传递到Flight页面

这个嵌套的iframe中的一个函数(SearchFlight)中,作为防御性编程,我需要在SearchFlight函数中进行参数检测,也就是判断过来的参数一

定是Array类型。

一:抛出问题

举个例子,下面有两个页面。

Index.html页面

 1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 </head>
6 <body>
7
8 <iframe name="childframe" src="Flight.html"></iframe>
9
10 <script type="text/javascript">
11
12 window.onload = function () {
13 //航班
14 var airplanes = ["MU", "CA", "CZ"];
15
16 var result = window.frames[0].flight.SearchFlight(airplanes);
17 };
18 </script>
19 </body>
20 </html>

Flight.html页面

 1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <script type="text/javascript">
8
9 var flight = (function () {
10
11 return {
12 SearchFlight: function (arr) {
13 var result = arr instanceof Array;
14 alert(result);
15 }
16 };
17 })();
18 </script>
19 </body>
20 </html>

很惊讶的发现instanceof居然不能判断出arr是一个数组,其实我们用肉眼可以看到,压根它就是一个数组,但是为什么instanceof却判断不出来呢?

我们知道instancof其实是一个js语法糖,我就修改成简单点的,判断arr.constructor是否指向Array,于是我把关键字改成如下形式,再来看看看效果。

 1         var flight = (function () {
2
3 return {
4 SearchFlight: function (arr) {
5 //var result = arr instanceof Array;
6
7 var result = arr.constructor == Array;
8
9 alert(result);
10 }
11 };
12 })();

从图上看,还真有点奇怪,明明都是function Array(),为啥都不能相等呢?不过事实就摆在眼前,容不得狡辩,只能静下心来想一想,我们

知道Array在js是属于引用类型,既然不相等那就说明他们其实是两个引用,对不对,并且Array是挂在window下的一个属性,window属性

也就是一个窗口的实例,那就说明Index.html是一个window实例,Flight.html也是一个window实例,为了验证下,我们看看两个window

是否相等?

看完图后,答案就很明白了,以C#的思维考虑一下,既然大的window都不相等,里面的Array属性自然就不相等,终于问题是找到了,下面

怎么解决呢?

二:解决问题

1. length判断

 这个很容易想到,也是最简单的,我们知道每个数组都有length,所以可以简简单单的看length是否存在就可以了,但是这个也不是万无一失

的,我们知道function中有两个属性length和prototype,那这就有问题了。这样我会错误的把f认为是数组。

2.使用prototype的call方法来实现

这个方法有点巧妙,首先我们要知道,每一个function中都会有call方法和prototype属性,而js在Object.prototype中的tostring函数上做了一个

封装,就是调用tostring.call后,会返回[object constructorName]的字符串格式,这里的constructorName就是call参数的函数名,比如我们把

arr传进去,就会返回“[object Array]”字符串格式,这个方法也可以让我们巧妙的判断是否是Array,但是比较遗憾的是,我们看不到这个call的内

部实现,只能黑盒的记住了。

javascript 为啥不用instanceof检测数组,这里有一个示例坑的更多相关文章

  1. JavaScript学习笔记:检测数组方法

    检查数组的方法 很多时候我们需要对JavaScript中数据类型(Function.String.Number.Undefined.Boolean和Object)做判断.在JavaScript中提供了 ...

  2. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  3. 在JavaScript中,如何判断数组是数组?

    如果你没有注意过这个问题,那么这个标题应该会让你感到困惑,判断数据类型这么基础的问题能有什么坑呢? 少年,你不能太天真了,我们朝夕面对的这门语言,可是JavaScript呀,任何你觉得已经习以为常的东 ...

  4. javascript篇-typeof,instanceof,constructor,toString判断数据类型的用法和区别

    javascript基本数据类型有:string,number,Boolean,undefined,null 引用类型(复杂类型):object, ES6中新增了一种数据类型:Symbol 以上数据类 ...

  5. JavaScript如何判断变量是数组还是对象

    编辑 方法一:通过判断变量的类型,并且变量的length属性(除了有一种例外是arguments对象–当给函数传参时数据存储的地方) var arr=[2,3,4]; var obj={"n ...

  6. JS高程5.引用类型(3)Array类型-检测数组

    1. instanceof操作符(ECMAScript3) 对于一个网页,或者是一个全局作用域而言,使用instanceof操作符来检测数组就可以得到满意的结果. 语法:if(value instan ...

  7. JavaScript类型判断instanceof与typeof对比

    经常有人会在JavaScript里写如下的方法: function checkType() { var s1 = 123; var s2 = "OK"; if (s1 instan ...

  8. 前端笔记之JavaScript(五)关于数组和字符串那点事

    一.数组 1.1数组概念 数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整体组成数组. 定义数组最简单的方式:数组字面量. 数组的字面量“[]” ...

  9. JS_高程5.引用类型(3)Array类型-检测数组

    1. instanceof操作符(ECMAScript3) 对于一个网页,或者是一个全局作用域而言,使用instanceof操作符来检测数组就可以得到满意的结果. 语法:if(value instan ...

随机推荐

  1. 顺序表(C++实现)

    类实现代码如下: ;//默认的表空间大小 template <class T> class SeqList{ protected: T *data;//存放数组 int maxSize;/ ...

  2. BOS物流管理系统-第八天

    BOS物流管理系统-第八天-权限系统设计-Shiro 回顾: 两大块业务:基础设置模块,业务派单模块. 两天:权限控制. 拦截器大的范围的.纯登录级别(认证级别)大颗粒的权限控制的一种技术. Shir ...

  3. ValidationMessageFor验证

    一,在modle下的自己新建的PowerViewModel.cs下编辑错误显示 public class PowerViewModel    {        [Required( ErrorMess ...

  4. JQuery:以name为条件查找

    例如:$(":input[name='keleyi']") 表示查找的是name为keleyi的表单. var a=$(t).prev(":input[name='dis ...

  5. PAT 团体程序设计天梯赛-练习集 L1-007. 念数字

    输入一个整数,输出每个数字对应的拼音.当整数为负数时,先输出“fu”字.十个数字对应的拼音如下: 0: ling 1: yi 2: er 3: san 4: si 5: wu 6: liu 7: qi ...

  6. Linux入门(六)ubuntu下vim编辑器安装与使用

    原文链接:http://jingyan.baidu.com/article/219f4bf7d03187de452d3862.html 一.安装 vim 控制台版本的vim随ubuntu一起发行,因此 ...

  7. 图的存储结构:邻接矩阵(邻接表)&链式前向星

    [概念]疏松图&稠密图: 疏松图指,点连接的边不多的图,反之(点连接的边多)则为稠密图. Tips:邻接矩阵与邻接表相比,疏松图多用邻接表,稠密图多用邻接矩阵. 邻接矩阵: 开一个二维数组gr ...

  8. Mysql表名区分大小写

    mysql数据库在windows服务器上表名和字段名均不区分大小写, 但在linux服务器上表名默认是区分大小写的,可在/etc/my.cnf文件中的[mysqld]下面加上一条配置 lower_ca ...

  9. mysql的字符串处理函数

    一.简明总结ASCII(char) 返回字符的ASCII码值BIT_LENGTH(str) 返回字符串的比特长度CONCAT(s1,s2…,sn) 将s1,s2…,sn连接成字符串CONCAT_WS( ...

  10. 3.1 Data Member的绑定

       文章开始提出了一段示例代码,并讨论了返回哪个x的问题.然后 a)   给出了我们普遍认为正确的回答,并肯定了这个想法: b)   提醒大家,这在以前的编译器实现中,并非正确. 在早期的实现中,首 ...