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

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

定是Array类型。

一：抛出问题

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

Index.html页面

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

 </head>

 <body>

     <iframe name="childframe" src="Flight.html"></iframe>

     <script type="text/javascript">

         window.onload = function () {

             //航班

             var airplanes = ["MU", "CA", "CZ"];

             var result = window.frames[0].flight.SearchFlight(airplanes);

         };

     </script>

 </body>

 </html>

Flight.html页面

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

 </head>

 <body>

     <script type="text/javascript">

         var flight = (function () {

             return {

                 SearchFlight: function (arr) {

                     var result = arr instanceof Array;

                     alert(result);

                 }

             };

         })();

     </script>

 </body>

 </html>

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

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

         var flight = (function () {

             return {

                 SearchFlight: function (arr) {

                     //var result = arr instanceof Array;

                     var result = arr.constructor == Array;

                     alert(result);

                 }

             };

         })();

从图上看，还真有点奇怪，明明都是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. (转)Sql Server之旅——第八站 复合索引和include索引到底有多大区别？

    索引和锁,这两个主题对我们开发工程师来说,非常的重要...只有理解了这两个主题,我们才能写出高质量的sql语句,在之前的博客中,我所说的 索引都是单列索引...当然数据库不可能只认单列索引,还有我这篇 ...

  2. Javascript之旅——第十一站：原型也不好理解？

    写到这篇,我的js系列也快接近尾声了,所以这个系列不会遗留js来实现面向对象的核心——原型,有些人说原型不好理解,其实嘛,要想系统 的理解原型,最便捷的方式就是看看经典的书,少看些博客,博客这东西只是 ...

  3. Javascript之旅——第十站：为什么都说闭包难理解呢？

    研究过js的朋友大多会说,理解了js的原型和闭包就可以了,然后又说这些都是js的高级内容,然后就又扯到了各种神马的作用域...然后不少 人就会被忽悠的云里雾里...下面我也试着来说说闭包,看我说的这个 ...

  4. Javascript之旅——第七站：说说js的调试

    最近比较吐槽,大家都知道,现在web前端相对几年前来说已经变得很重了,各种js框架,各种面对对象,而且项目多了,就会提取公共模块, 这些模块的UI展示都一样,不一样的就是后台逻辑,举个例子吧,我们做企 ...

  5. Javascript之旅——第五站：说说那些所谓的包装类型

    最近不看犀牛书了,那本翻译的特烂而且好拗口,尤其是原型那块说的乱七八糟,后来经同事介绍,买了本js高级程序设计,然后就继续 苦逼的看,不吐槽了,继续说说js中有新鲜感的包装类型. 一:String 说 ...

  6. Javascript之旅——第四站：parseInt中要注意的坑

    前些天信用卡站点要接入一个新功能,不过还真比较坑爹,asp站点,大家都知道信用卡的背面是有一个有效期的,在对接银行中这个信息 一定是要传给银行做数据校验,用户在语音输入信用卡有效期后,系统会做一个有效 ...

  7. Sql Server之旅——第八站 复合索引和include索引到底有多大区别？

    周末终于搬进出租房了,装了宽带....才发现没网的日子...那是一个怎样的与世隔绝呀...再也受不了那样的日子了....好了,既然网 安上去了,还得继续我的这个系列. 索引和锁,这两个主题对我们开发工 ...

  8. Javascript之旅——第六站：看看writable特性

    说起js中的那些特性标记,总觉得有些怪怪的,那为什么要说到这个attribute,起源于对一个问题的疑问,我们都知道window对象其实就是 浏览器窗口的一个实例,既然是一个实例,那这个实例就应该有“ ...

  9. Javascript之旅——第三站：几个需要注意的运算符

    平时写惯了C#,所以会觉得什么样的运算符就应该做什么样的运算,但是有一天你的习惯被其他语言颠覆了,不知道是不是有一股强大的好奇 心,刚好在js中,我的这种习惯就被颠覆了,下面就看看哪些运算符颠覆了我的 ...

随机推荐

  1. 自己动手写计算器v1.2

    1.2版本主要添加了分数.取负.开方三个功能,由于这三中运算输入单目运算,所以,新声明了一个新类 class OPeratorV1_2 至此基本完成了一个标准计算器,至于拥有更多功能的科学计算器,日后 ...

  2. Delphi String 常用字串符处理函数

    Delphi 在面对跨平台开发,程序语言也改进不少,不过有些改进,让原本 Delphi 开发者有些不适应,最显注的就是字串处理函数了,原本 Pascal 语言字串起始由 1 开始,几乎是它的经典了,新 ...

  3. 修复 XE7 update1 发布 iOS 8.x 实机问题

      1. 开启工程目录下面的 Entitlement.TemplateiOS.xml 档案. 2. 加入二行: <key>application-identifier</key> ...

  4. [转]JavaScript程序编码规范

    原文:http://javascript.crockford.com/code.html 作者:Douglas Crockford 译文:http://www.yeeyan.com/articles/ ...

  5. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

  6. 使用 iosOverlay.js 创建 iOS 风格的提示和通知

    iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...

  7. [deviceone开发]-do_GridView的简单示例

    一.简介 do_GridView的高度支持-1,根据gridview里item的个数来决定gridview的高度,这样gridview自身就无法滚动了,需要放到固定高度的scrollview里才能滚动 ...

  8. [原][CSS3]会动的盒子机器人

    [PC与移动端皆可]会动的盒子机器人 浏览器必须可以解析perspective属性. 在线:http://wangxinsheng.herokuapp.com/boxMan 代码: <!DOCT ...

  9. windows 下配置 nginx的问题

    1.存放nginx的目录最好是英文目录,如果存放到中文目录下启动时有问题: 未完,待续...

  10. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...