博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript之旅——第八站:说说instanceof踩了一个坑
阅读量:5910 次
发布时间:2019-06-19

本文共 1549 字,大约阅读时间需要 5 分钟。

原文:

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

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

定是Array类型。

 

一:抛出问题

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

Index.html页面

1  2  3  4      5  6  7  8      9 10     19 20 

Flight.html页面

1  2  3  4      5  6  7     19 20 

很惊讶的发现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的内

部实现,只能黑盒的记住了。

 

转载地址:http://tstpx.baihongyu.com/

你可能感兴趣的文章
1.4.运维平台之硬件CMDB
查看>>
性能测试分享:性能测试工具开发的案例分享(下)
查看>>
NotesList
查看>>
npm i 安装依赖包提示字符串解析异常(Unexpected end of JSON input)
查看>>
微信小程序如何像webview一样加载html5网页
查看>>
apache和nginx的区别
查看>>
CentOs6.5系统下MySQL-5.7.19安装
查看>>
Raid 简单说明
查看>>
jQuery.validate 中文API
查看>>
我的友情链接
查看>>
网络犯罪如何取证
查看>>
Python 操作samba文件服务器
查看>>
SQL server常用操作命令
查看>>
我的友情链接
查看>>
ms sql convert的使用细节
查看>>
C# 协变与抗变详解
查看>>
Hadoop十大应用误解
查看>>
Linux自学笔记——Centos7系统之systemd
查看>>
彩虹表-破解哈希算法 MD5加密法(转)
查看>>
Create a Roo project from Spring ToolSuite
查看>>