前些天写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. 背水一战 Windows 10 (1) - C# 6.0 新特性

    [源码下载] 背水一战 Windows 10 (1) - C# 6.0 新特性 作者:webabcd 介绍背水一战 Windows 10 之 C# 6.0 新特性 介绍 C# 6.0 的新特性 示例1 ...

  2. LeetCode122:Best Time to Buy and Sell Stock II

    题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...

  3. jquery表单选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. mysql---ENCODE警告

    'ENCODE' is deprecated and will be removed in a future release. Please use AES_ENCRYPT instead ***** ...

  5. Scala确实是门好语言

    看完了一本Scala的书,整体感觉很不错,语法很简洁,对用惯了脚本语言的人来说语言特性稍微有点复杂,不过对Java用户应该没有压力. 最牛叉的有两点:并发.面向领域编程    

  6. Scalaz（27）－ Inference & Unapply ：类型的推导和匹配

    经过一段时间的摸索,用scala进行函数式编程的过程对我来说就好像是想着法儿如何将函数的款式对齐以及如何正确地匹配类型,真正是一种全新的体验,但好像有点太偏重学术型了. 本来不想花什么功夫在scala ...

  7. GJM ： 基于Actor模式的c#网络游戏服务器的实现和Unity游戏客户端的连接 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  8. 想要学好JQuery看这里

    一.简介 jQuery 库可以通过一行简单的标记被添加到网页中 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操 ...

  9. xshell 通过ssh连接 ubuntu15_x64

    参考: http://www.cnblogs.com/wuyuegb2312/archive/2013/03/28/2986963.html 中文乱码在客户端xshell解决:http://jingy ...

  10. Method Draw – 很好用的 SVG 在线编辑器

    Method Draw 是一款在线 SVG 编辑器,是 SVG Edit 的一个分支.Method Draw 的目的是改进 SVG Edit 的可用性和用户体验.它移除了 line-caps/corn ...