javascript 为啥不用instanceof检测数组，这里有一个示例坑
前些天写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检测数组，这里有一个示例坑的更多相关文章
- JavaScript学习笔记：检测数组方法
检查数组的方法 很多时候我们需要对JavaScript中数据类型(Function.String.Number.Undefined.Boolean和Object)做判断.在JavaScript中提供了 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- 在JavaScript中，如何判断数组是数组？
如果你没有注意过这个问题,那么这个标题应该会让你感到困惑,判断数据类型这么基础的问题能有什么坑呢? 少年,你不能太天真了,我们朝夕面对的这门语言,可是JavaScript呀,任何你觉得已经习以为常的东 ...
- javascript篇-typeof,instanceof,constructor,toString判断数据类型的用法和区别
javascript基本数据类型有:string,number,Boolean,undefined,null 引用类型(复杂类型):object, ES6中新增了一种数据类型:Symbol 以上数据类 ...
- JavaScript如何判断变量是数组还是对象
编辑 方法一:通过判断变量的类型,并且变量的length属性(除了有一种例外是arguments对象–当给函数传参时数据存储的地方) var arr=[2,3,4]; var obj={"n ...
- JS高程5.引用类型（3）Array类型-检测数组
1. instanceof操作符(ECMAScript3) 对于一个网页,或者是一个全局作用域而言,使用instanceof操作符来检测数组就可以得到满意的结果. 语法:if(value instan ...
- JavaScript类型判断instanceof与typeof对比
经常有人会在JavaScript里写如下的方法: function checkType() { var s1 = 123; var s2 = "OK"; if (s1 instan ...
- 前端笔记之JavaScript（五）关于数组和字符串那点事
一.数组 1.1数组概念 数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整体组成数组. 定义数组最简单的方式:数组字面量. 数组的字面量“[]” ...
- JS_高程5.引用类型（3）Array类型-检测数组
1. instanceof操作符(ECMAScript3) 对于一个网页,或者是一个全局作用域而言,使用instanceof操作符来检测数组就可以得到满意的结果. 语法:if(value instan ...
随机推荐
- C#委托与事件讲解(一)
首先,我们还是先说说委托吧,从字面上理解,只要是中国人应该都知道这个意思,除非委托2个中文字不认识,举个例子,小明委托小张去买车票. 但是在我们的程序世界里,也是这么的简单吗?当然,什么是OO ...
- openstack私有云布署实践【3 keepalive配置（VRRP虚IP）】
这里只用到keepalived 或者pacemaker两种方法,可二选一来配置,官方提供的是pacemaker,但我们实际测试环境和生产环境上使的是keepalive 首先在4台control ...
- mac下搭建cordova开发环境
Apache Cordova 原名叫PhoneGap.是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.PhoneGap最初由Nitobi开发,2011年 ...
- 【第一篇】Volley的使用之json请求
最近项目写完,有开始新的学习了,volley很久以前就接触了,也看了源码,然而却没有通过文章去记录自己的学习成果. 首先讲下volley的特点: 1,扩展性强.Volley 中大多是基于接口的设计,可 ...
- 《细说PHP》的php语言结构
6.1流程控制 顺序结构 语句按照出现的先后次序自上而下依次执行 分支结构 先做判断再做选择 6.3.4 特殊的流程控制语句 break语句结束当前for.foreach.while.do-while ...
- UVa 1600 Patrol Robot (习题 6-5)
传送门: https://uva.onlinejudge.org/external/16/1600.pdf 多状态广搜 网上题解: 给vis数组再加一维状态,表示当前还剩下的能够穿越的墙的次数,每次碰 ...
- 《JS权威指南学习总结--8.8.2高阶函数》
内容要点: 所谓高阶函数(higher-order function)就是操作函数的函数,它接收一个或多个函数作为参数,并返回一个新函数. 例1: //这个高阶函数返回一个新的函数,这个新函数将它的实 ...
- jquery操作属性 attr()和 prop()兼容性问题
jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...
- 前台图片上传展示JS（单张图片展示）
<script type="text/javascript"> //下面用于多图片上传预览功能 function setImagePreviews(aval ...
- 二维小波包重构wprec2\wprcoef
clc,clear all,close all; load woman; t=wpdec2(X,2,'haar');%小波包2层分解 r_X=wprec2(t);%重构小波包 r_X10=wprcoe ...