前些天写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. 提高生产性工具(五) - 数据的过滤器和图形化（适用于 MVC5 + MongoDB）

    在下面流水账似的文章之前,先将一些感悟说一下. 1.如果一个系统对于某个功能在至少三个地方使用的话,必须将其抽象提炼出来,而且时间点最好是大规模测试之前. 2.提炼出来的功能,如果品质做得好,整个系统 ...

  2. 使用Aspose插件对Excel操作

    使用使用Aspose插件对Excel文档进行导入导出操作 使用前请先下载Aspose插件引用 Excel导入: 前台使用file标签获取,submit方式提交. <form id="f ...

  3. all requires API level 3 (current min is 1)问题的解决

    几次出现了all requires API level 3 (current min is 1)的错误,后来发现解决的方法是右键单击项目文件夹,选择Android Tools->Clear Li ...

  4. Spring之AntPathMatcher

    前言 AntPathMatcher是什么?主要用来解决什么问题? 背景:在做uri匹配规则发现这个类,根据源码对该类进行分析,它主要用来做类URLs字符串匹配: 效果 可以做URLs匹配,规则如下 ? ...

  5. 解决远程连接mysql很慢的方法(mysql_connect 打开连接慢)

    http://www.jb51.net/article/27616.htm   有次同事提出开发使用的mysql数据库连接很慢,因为我们的mysql开发数据库是单独一台机器部署的,所以认为可能是网络连 ...

  6. Java经典实例：把字符串解析为日期时间

    Java版本:1.8开始 import java.time.LocalDate; import java.time.LocalDateTime; /** * Created by Frank */ p ...

  7. 通过C#来加载X509格式证书文件并生成RSA对象

    private static RSACryptoServiceProvider GetPrivateKey(string priKeyFile, string keyPwd) { var pc = n ...

  8. spring 整合 struts

    struts配置 objectFactory 在struts.xml添加,用spring工厂管理action对象 <constant name="struts.objectFactor ...

  9. js获取页面中图片的总数

    查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...

  10. jQuery.buildFragment源码分析以及在构造jQuery对象的作用

    这个方法在jQuery源码中比较靠后的位置出现,主要用于两处.1是构造jQuery对象的时候使用 2.是为DOM操作提供底层支持,这也就是为什么先学习它的原因.之前的随笔已经分析过jQuery的构造函 ...