前些天写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. 新型编译器将原生代码转换为JavaScript

    导读:Emscripten C/C++到JavaScript项目利用来自LLVM的后端构建起更具速度与针对性优势的编译方案. 在当初刚刚公布时,Emsripten听起来完全像是个冲劲十足的技术笑谈:一 ...

  2. HP+MYSQL网站SQL Injection攻防

    WebjxCom提示:程序员们写代码的时候讲究TDD(测试驱动开发):在实现一个功能前,会先写一个测试用例,然后再编写代码使之运行通过.其实当黑客SQL Injection时,同样是一个TDD的过程: ...

  3. 【从API学英语】-PreparedStatement

    原文 An object that represents a precompiled SQL statement. A SQL statement is precompiled and stored ...

  4. mysql中变量赋值

    http://www.cnblogs.com/qixuejia/archive/2010/12/21/1913203.html sql server中变量要先申明后赋值: 局部变量用一个@标识,全局变 ...

  5. php PDO调用带有out参数的存储过程(原创)

    这几天比较闲学了下PHP, 开发工具zendphp,server下的一个集成工具WampServer. 感觉php实现一个功能写的代码比asp.net java都少,特别是数据库访问这块,如果是asp ...

  6. 2016弱校联盟十一专场10.2---Around the World（深搜+组合数、逆元）

    题目链接 https://acm.bnu.edu.cn/v3/problem_show.php?pid=52305 problem  description In ICPCCamp, there ar ...

  7. FreeBSD-安装与配置（10.3@VMware)

    (#今天尝试了一天,装上了FreeBSD:记录几个重要的地方 bsdinstall/bsdconfig 善用ports,本地源 善用handbook以及doc pkg install XXX,装上Xo ...

  8. Spring中常用的连接池配置

    首先,我们准备Jdbc属性文件 jdbc.properties,用于保存连接数据库的信息,利于我们在配置文件中的使用 jdbc.driver=com.mysql.jdbc.Driver jdbc.ur ...

  9. 初探百度F.I.S — 由工具到解决方案

    1. 前言 阅兵放假三天,我哪儿也没去,宅着看了一些东东:git命令行.svn命令以及下面的主角——百度FIS.对看过的git.svn的命令也做了一些总结,请参见:<git命令学习笔记>和 ...

  10. 一些ajax代码

    $.ajax({ type : "get", url : "list_hot_ajax.json", data : {"provinceId" ...