JavaScript中Object.prototype.toString方法的原理
在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法.
1
2
|
var arr = []; console.log(Object.prototype.toString.call(arr)) //"[object Array]" |
本文要讲的就是,toString方法是如何做到这一点的,原理是什么.
ECMAScript 3
在ES3中,Object.prototype.toString方法的规范如下:
1
|
15.2.4.2 Object.prototype.toString() |
在toString方法被调用时,会执行下面的操作步骤:
1. 获取this对象的[[Class]]属性的值.
2. 计算出三个字符串"[object ", 第一步的操作结果Result(1), 以及 "]"连接后的新字符串.
3. 返回第二步的操作结果Result(2).
[[Class]]是一个内部属性,所有的对象(原生对象和宿主对象)都拥有该属性.在规范中,[[Class]]是这么定义的
内部属性 | 描述 |
---|---|
[[Class]] | 一个字符串值,表明了该对象的类型. |
然后给了一段解释:
所有内置对象的[[Class]]属性的值是由本规范定义的.所有宿主对象的[[Class]]属性的值可以是任意值,甚至可以是内置对象使用过的[[Class]]属性的值.[[Class]]属性的值可以用来判断一个原生对象属于哪种内置类型.需要注意的是,除了通过Object.prototype.toString方法之外,本规范没有提供任何其他方式来让程序访问该属性的值(查看 15.2.4.2).
也就是说,把Object.prototype.toString方法返回的字符串,去掉前面固定的"[object "和后面固定的"]",就是内部属性[[class]]的值,也就达到了判断对象类型的目的.jQuery中的工具方法$.type(),就是干这个的.
在ES3中,规范文档并没有总结出[[class]]内部属性一共有几种,不过我们可以自己统计一下,原生对象的[[class]]内部属性的值一共有10种.分别是:"Array", "Boolean", "Date", "Error", "Function", "Math", "Number", "Object", "RegExp", "String".
ECMAScript 5
在ES5.1中,除了规范写的更详细一些以外,Object.prototype.toString方法和[[class]]内部属性的定义上也有一些变化,Object.prototype.toString方法的规范如下:
15.2.4.2 Object.prototype.toString ( )
在toString方法被调用时,会执行下面的操作步骤:
如果this的值为undefined,则返回"[object Undefined]".
如果this的值为null,则返回"[object Null]".
让O成为调用ToObject(this)的结果.
让class成为O的内部属性[[Class]]的值.
返回三个字符串"[object ", class, 以及 "]"连接后的新字符串.
可以看出,比ES3多了1,2,3步.第1,2步属于新规则,比较特殊,因为"Undefined"和"Null"并不属于[[class]]属性的值,需要注意的是,这里和严格模式无关(大部分函数在严格模式下,this的值才会保持undefined或null,非严格模式下会自动成为全局对象).第3步并不算是新规则,因为在ES3的引擎中,也都会在这一步将三种原始值类型转换成对应的包装对象,只是规范中没写出来.ES5中,[[Class]]属性的解释更加详细:
所有内置对象的[[Class]]属性的值是由本规范定义的.所有宿主对象的[[Class]]属性的值可以是除了"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"之外的的任何字符串.[[Class]]内部属性是引擎内部用来判断一个对象属于哪种类型的值的.需要注意的是,除了通过Object.prototype.toString方法之外,本规范没有提供任何其他方式来让程序访问该属性的值(查看 15.2.4.2).
和ES3对比一下,第一个差别就是[[class]]内部属性的值多了两种,成了12种,一种是arguments对象的[[class]]成了"Arguments",而不是以前的"Object",还有就是多个了全局对象JSON,它的[[class]]值为"JSON".第二个差别就是,宿主对象的[[class]]内部属性的值,不能和这12种值冲突,不过在支持ES3的浏览器中,貌似也没有发现哪些宿主对象故意使用那10个值.
ECMAScript 6
ES6目前还只是工作草案,但能够肯定的是,[[class]]内部属性没有了,取而代之的是另外一个内部属性[[NativeBrand]].[[NativeBrand]]属性是这么定义的:
内部属性 | 属性值 | 描述 |
---|---|---|
[[NativeBrand]] | 枚举NativeBrand的一个成员. | 该属性的值对应一个标志值(tag value),可以用来区分原生对象的类型. |
[[NativeBrand]]属性的解释:
[[NativeBrand]]内部属性用来识别某个原生对象是否为符合本规范的某一种特定类型的对象.[[NativeBrand]]内部属性的值为下面这些枚举类型的值中的一个:NativeFunction, NativeArray, StringWrapper, BooleanWrapper, NumberWrapper, NativeMath, NativeDate, NativeRegExp, NativeError, NativeJSON, NativeArguments, NativePrivateName.[[NativeBrand]]内部属性仅用来区分区分特定类型的ECMAScript原生对象.只有在表10中明确指出的对象类型才有[[NativeBrand]]内部属性.
表10 — [[NativeBrand]]内部属性的值
属性值 | 对应类型 |
---|---|
NativeFunction | Function objects |
NativeArray | Array objects |
StringWrapper | String objects |
BooleanWrapper | Boolean objects |
NumberWrapper | Number objects |
NativeMath | The Math object |
NativeDate | Date objects |
NativeRegExp | RegExp objects |
NativeError | Error objects |
NativeJSON | The JSON object |
NativeArguments | Arguments objects |
NativePrivateName | Private Name objects |
可见,和[[class]]不同的是,并不是每个对象都拥有[[NativeBrand]].同时,Object.prototype.toString方法的规范也改成了下面这样:
15.2.4.2 Object.prototype.toString ( )
在toString方法被调用时,会执行下面的操作步骤:
如果this的值为undefined,则返回"[object Undefined]".
如果this的值为null,则返回"[object Null]".
让O成为调用ToObject(this)的结果.
如果O有[[NativeBrand]]内部属性,让tag成为表29中对应的值.
否则
让hasTag成为调用O的[[HasProperty]]内部方法后的结果,参数为@@toStringTag.
如果hasTag为false,则让tag为"Object".
否则,
让tag成为调用O的[[Get]]内部方法后的结果,参数为@@toStringTag.
如果tag是一个abrupt completion,则让tag成为NormalCompletion("???").
让tag成为tag.[[value]].
如果Type(tag)不是字符串,则让tag成为"???".
如果tag的值为"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp",或
者"String"中的任一个,则让tag成为字符串"~"和tag当前的值连接后的结果.
返回三个字符串"[object ", tag, and "]"连接后的新字符串.
表29 — [[NativeBrand]] 标志值
[[NativeBrand]]值 | 标志值 |
---|---|
NativeFunction | "Function" |
NativeArray | "Array" |
StringWrapper | "String" |
BooleanWrapper | "Boolean" |
NumberWrapper | "Number" |
NativeMath | "Math" |
NativeDate | "Date" |
NativeRegExp | "RegExp" |
NativeError | "Error" |
NativeJSON | "JSON" |
NativeArguments | "Arguments" |
可以看到,在规范上有了很大的变化,不过对于普通用户来说,貌似感觉不到.
也许你发现了,ES6里的新类型Map,Set等,都没有在表29中.它们在执行toString方法的时候返回的是什么?
1
2
|
console.log(Object.prototype.toString.call(Map())) //"[object Map]" console.log(Object.prototype.toString.call(Set())) //"[object Set]" |
其中的字符串"Map"是怎么来的呢:
15.14.5.13 Map.prototype.@@toStringTag
@@toStringTag 属性的初始值为字符串"Map".
由于ES6的规范还在制定中,各种相关规定都有可能改变,所以如果想了解更多细节.看看下面这两个链接,现在只需要知道的是:[[class]]没了,使用了更复杂的机制.
以上所述是小编给大家分享的JavaScript中Object.prototype.toString方法的原理,希望对大家有所帮助!
JavaScript中Object.prototype.toString方法的原理的更多相关文章
- JavaScript:Object.prototype.toString方法的原理
在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. var arr = []; console.log(Obje ...
- 利用Object.prototype.toString方法,实现比typeof更准确的type校验
Object.prototype.toString方法返回对象的类型字符串,因此可以用来判断一个值的类型. 调用方法: Object.prototype.toString.call(value) 不同 ...
- js中通过Object.prototype.toString方法----精确判断对象的类型
判断是否为函数 function isFunction(it) { return Object.prototype.toString.call(it) === '[object Func ...
- 【JavaScript】Object.prototype.toString.call()进行类型判断
权声明:本文为博主原创文章,未经博主允许不得转载. op = Object.prototype, ostring = op.toString, ... function isFunction(it) ...
- 解析JavaScript中的sort()排序方法以及原理
Array.sort()方法将数组中的元素进行排序,返回排序后的数组,默认是按照升序排序的.sort方法会调用数组中每一项的toString()方法,然后按照ascii编码进行排序,如果数组含有und ...
- 在nodejs中 Object的toString()方法 querystring的stringify() JSON.stringify()
刚学nodejs,做到一个例子:发送简单的HTTP请求.遇到一个问题,客户端给服务端发送的消息到服务端,服务端收不到消息,确切的说是“”. 以下是服务端代码:server.js const http ...
- JavaScript中String.prototype.replace() 方法的使用
摘抄于:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace ...
- JavaScript中Object值合并方法
原文:https://www.cnblogs.com/fullstack-yang/p/8085206.html ------------------------------------ 前言:在日常 ...
- JavaScript:Object.prototype.toString进行数据类型判定
在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. var arr = []; console.log(Obje ...
随机推荐
- 004_ssh连接慢的问题的解决?
<1>群中同学遇到的问题,我之前在uuwatch也遇到了同样的问题? 问个问题师兄们 突然之间 公司服务器连接很慢 连一个shell需要10几秒钟 服务器就在公司全是内网服务器, 我也不知 ...
- Nginx-1.6.3反向代理
源码安装nginx cat /etc/redhat-release uname -rm yum install pcre-devel openssl-devel -y rpm -qa pcre pcr ...
- .NET直接编译成本地代码:.NET Native架构简介
原文地址:http://blog.csdn.net/atfield/article/details/23449089
- vue数据绑定方式:
1,{{ }} 2,v-text 3,v-html 前两种接受普通变量,第三种绑定带有标签的内容,但是严禁使用,这个会有 XSS危险,(将字符串解析成源代码) 4,v-bind:title=‘m ...
- js前端数据加密插件
(2014-11-14 15:37:35) 转载▼ 标签: it 分类: Web前端开发 摘要: 大部分动态网站都支持从客户端到服务器传递数据,如果传递的数据被别人截取就非常危险,尤其是一些用户名密码 ...
- 重装系统备份MYSQL数据(整库备份)
今天要重装Windows 8系统,但是我的Mysql里面数据太多,要备份成sql文件实在太麻烦,于是我听说可以直接拷贝数据文件夹,所以就试了,结果还成果了. 具体如下: 我安装的时候把数据文件夹就放在 ...
- linux命令(35):head命令
1.命令格式: head [参数]... [文件]... 2.命令功能: head 用来显示档案的开头至标准输出中,默认head命令打印其相应文件的开头10行. 3.命令参数: -q 隐藏文件名 -v ...
- poj 3264(RMQ或者线段树)
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 42929 Accepted: 20184 ...
- Redis实现分布式锁 php
一.分布式锁的作用: redis写入时不带锁定功能,为防止多个进程同时进行一个操作,出现意想不到的结果,so...对缓存进行插入更新操作时自定义加锁功能. 二.Redis的NX后缀命令 Redis有一 ...
- 图形界面远程访问Linux(Debian安装VNC以及开机启动)
https://blog.csdn.net/wangxiaopeng0329/article/details/51569882