在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js中检测对象类型的常见的方法有几种:

1、typeof操作符。对于Function、String、Number、Undefined这几种类型的对象来说,不会有什么问题,但是针对Array的对象就没什么用途了:

Js代码  收藏代码
  1. alert(typeof null); // "object"
  2. alert(typeof []); // "object"

2、instanceof操作符。此操作符检测对象的原型链是否指向构造函数的prototype对象,恩,听起来不错,应该可以解决我们的数组检测问题:

Js代码  收藏代码
  1. var arr = [];
  2. alert(arr instanceof Array); // true

3、对象的constructor属性。除了instanceof,我们还可以利用每个对象都具有constructor的属性来判断其类型,于是乎我们可以这样做:

Js代码  收藏代码
  1. var arr = [];
  2. alert(arr.constructor == Array); // true

貌似后两个解决方案是无懈可击的,但真的是这样么?天有不测风云,当你在多个frame中来回穿梭的时候,令人沮丧的问题出现了:

Js代码  收藏代码
  1. var iframe = document.createElement('iframe');
  2. document.body.appendChild(iframe);
  3. xArray = window.frames[window.frames.length-1].Array;
  4. var arr = new xArray(1,2,3); // [1,2,3]
  5. // 哎呀!
  6. arr instanceof Array; // false
  7. // 哎呀呀!
  8. arr.constructor === Array; // false

由于每个iframe都有一套自己的执行环境,跨frame实例化的对象彼此是不共享原型链的,因此导致上述检测代码失效!怎么办怎么办??嗯,javascript是动态语言,或许万金油“鸭式辨型”(duck type)可以助我们一臂之力“如果它走起路来像鸭子,叫起来也像鸭子,那就当他是鸭子吧”,同理,可以检测某些数组对象特有的能力来做判断,这个法子已经有人用了,比如Prototype框架,来看看它实现的Object.isArray方法:

Js代码  收藏代码
  1. isArray: function(object) {
  2. return object != null && typeof object == "object" &&
  3. 'splice' in object && 'join' in object;
  4. }

isArray:”object,你有splice、join这两个数组特有的方法吗?” 
object:“嗯,没错我有!” 
isArray:“好吧,那你就是个数组了,哪怕你是冒充的,囧……”

Js代码  收藏代码
  1. var trickster = { splice: 1, join: 2 };
  2. Object.isArray(trickster); // 假冒成功,耶

没错,这个解决方案给人的感觉有点别扭,任何一个具有'splice'和'join'属性的对象都能通过这个检测!怎么办怎么办怎么办??别着急,仔细想想,其实我们需要的是一个能取得对象实际类型,而且又能跨frame使用的方法即可。这不,细心的老外在翻阅ECMA262标准的时候发现了这个(btw,我也看了,怎么就没发现这个用途呢,囧):

ECMA-262 写道

Object.prototype.toString( ) When the toString method is called, the following steps are taken: 
1. Get the [[Class]] property of this object. 
2. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”. 
3. Return Result (2) 

上面的规范定义了Object.prototype.toString的行为:首先,取得对象的一个内部属性[[Class]],然后依据这个属性,返回一个类似于"[object Array]"的字符串作为结果(看过ECMA标准的应该都知道,[[]]用来表示语言内部用到的、外部不可直接访问的属性,称为“内部属性”)。利用这个方法,再配合call,我们可以取得任何对象的内部属性[[Class]],然后把类型检测转化为字符串比较,以达到我们的目的。还是先来看看在ECMA标准中Array的描述吧:

ECMA-262 写道

new Array([ item0[, item1 [,…]]]) 
The [[Class]] property of the newly constructed object is set to “Array”. 

于是乎,可以改写之前的isArray函数以利用这个特性,如下:

Js代码  收藏代码
  1. function isArray(o) {
  2. return Object.prototype.toString.call(o) === '[object Array]';
  3. }

call改变toString的this引用为待检测的对象,返回此对象的字符串表示,然后对比此字符串是否是'[object Array]',以判断其是否是Array的实例。也许你要问了,为什么不直接o.toString()?嗯,虽然Array继承自Object,也会有toString方法,但是这个方法有可能会被改写而达不到我们的要求,而Object.prototype则是老虎的屁股,很少有人敢去碰它的,所以能一定程度保证其“纯洁性”:)

与前面几个方案不同,这个方法很好的解决了跨frame对象构建的问题,经过测试,各大浏览器兼容性也很好,可以放心使用。一个好消息是,很多框架,比如jQuery、Base2等等,都计划借鉴此方法以实现某些特殊的,比如数组、正则表达式等对象的类型判定,不用我们自己写了。

转载于:https://www.cnblogs.com/wyf-gis/p/4065092.html

Object.prototype.toString.call()检测相关推荐

  1. 数据类型的判断 --Object.prototype.toString.call(obj)精准检测对象类型

    数据类型的判断 typeof typeof返回一个表示数据类型的字符串,返回结果包括:number.boolean.string.symbol.object.undefined.function等7种 ...

  2. 为什么用Object.prototype.toString.call(obj)检测对象类型?

    37 Essential JavaScript Interview Questions*,中有一道javascript题: 使用 typeof bar === "object" 检 ...

  3. 【javaScript】Object.prototype.toString.call() 、 instanceof 以及 Array.isArray() 区别与优化层面的比较

    1. Object.prototype.toString.call() 每一个继承 Object 的对象都有 toString 方法,如果 toString 方法没有重写的话,会返回 [Object ...

  4. 通过 Object.prototype.toString.call() 进行类型判断

    为什么80%的码农都做不了架构师?>>>    首先看一段ECMA中对Object.prototype.toString的解释: Object.prototype.toString( ...

  5. JavaScript:Object.prototype.toString进行数据类型判定

    在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. var arr = []; console.log(Obje ...

  6. JavaScript中Object.prototype.toString方法的原理

    在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. <一>, ECMAScript 3  1. 在E ...

  7. JavaScript:Object.prototype.toString方法的原理

    在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. var arr = []; console.log(Obje ...

  8. 由Object.prototype.toString.call( )引发关于toString( )方法的思考

    引言 前端面试中有这么一道经典的问题,如何判断一个对象是否为数组? ES5提供了一个确定对象是否为数组的函数 Array.isArray(object); 复制代码 其中,object是必须的,表示要 ...

  9. 关于 Object.prototype.toString.call() 方法

    Javascript中可通过typeof来获取对象的类型,但是对象如果是内置的继承Object的类型,typeof也只能返回object,不能获取对象的具体类型,如Date,Array,Boolean ...

最新文章

  1. 超强后浪:14岁考上研究生,如今17岁的他或将成为全国最小的博士生!
  2. Solaris10之SVM简析
  3. hdu2561 第二小整数(排序)
  4. 网络:浏览器静态资源缓存机制
  5. java设计模式face_24种设计模式--门面模式【Facede Pattern】
  6. java的数据类型如下所示
  7. windows设备坐标和逻辑坐标的转换
  8. 模拟网页行为之工具篇
  9. 本田电动SUV Prologue拟2024年上市销售 初始年销售目标7万辆
  10. Google 高薪争夺 Rust 人才,将用 Rust 重构关键组件!
  11. java初级面试总结
  12. 热敏打印机ESCPOS指令封装类,票据打印从此轻松,佳博系列实测通过
  13. .axf文件_MDK 的编译过程及文件类型全解(一)
  14. 大数据导论习题_《大数据导论(通识课版)》.PDF
  15. 数据结构1800试题(第5章)
  16. 正阅读微信小说分销系统-视频教程-5.订单明细
  17. 农历和阳历互转(c语言)
  18. 告别手摇织布机的AI时代
  19. python中set option_python的set_option选择
  20. Java项目:JSP二手自行车在线销售商城平台系统

热门文章

  1. 服务器时间修改日志怎么查,查看云服务器的操作日志
  2. Java竞赛目的_ACM竞赛 Java编程小结
  3. 华为云创建免费服务器的一次失败尝试
  4. IntelliJ IDEA 旗舰版(Ultimate) 破解与注册(可以在加载界面显示自己名字)
  5. 【项目管理】工具--数据收集
  6. 全职宝妈跨专业备考信息系统项目管理师【52,52,51】
  7. 2021下半年软考分数线会有变动吗?
  8. 笔记-信息化与系统集成技术-区块链的特征
  9. 论文,成本管理与进度管理(主成本)
  10. 轻量级定时任务框架:APScheduler