JavaScript Object.prototype.toString为什么可以检测对象类型？

ゝ一纸荒年。 2023-09-30 11:04 8阅读 0赞

在我的另一篇文章[《js typeof、instanceof区别一次给你讲明白》][js typeof_instanceof]中讲过可以使用`Object.prototype.toString`判断对象类型，而且是相比于`typeof`和`instanceof`更严谨的方式。

老实说，当时只知道可以这么用，为什么可以这么用，其中什么原理，我是一概不知。

这几天正好梳理原型相关的知识，碰到了这块内容，顺藤摸瓜竟然找到了答案，这里跟大家分享一下。

# 初识`Object.prototype.toString` #

想找到原因，首先至少得搞清楚这个方法的定义和作用，我选择查询MDN，给大家贴一下地址：[Object.prototype.toString][]。

其中对`Object.prototype.toString`的解释如下：

> 每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 “\[object ***type***\]”，其中 type 是对象的类型。

其中`type`是对象类型，但是这个`type`是怎么判断的呢？我们还是不清楚。

好在文档里面列出了相关的一些规范：  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Luj56CB5ZCbLg_size_20_color_FFFFFF_t_70_g_se_x_16][]  
我开始查看这些规范，希望从中找到更多关于`Object.prototype.toString`的解释。

# 探秘JS规范 #

终于，皇天不负有心人，我从规范中看到了关键性的描述：  
![85ded52e0e1940ada5cf420257d55b06.png][]  
从这里我们知道，上面的`type`就是这里提到的`[[Class]]`，类似于这种命名往往都是JS的内部属性，我们只需找到它的定义即可。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Luj56CB5ZCbLg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]  
找到了它的定义“The kind of this object”，貌似有点废话文学，不急我们继续查找。  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Luj56CB5ZCbLg_size_20_color_FFFFFF_t_70_g_se_x_16 2][]  
这里解释了当执行`new Object(value)`时到底发生了什么，而最后一步就包括将内部属性`[[Class]]`设置成`Object`。

我又看了`new Number(value)`、`new String(value)`、`new Date(value)`等等，无一例外都是将`[[Class]]`设置成构造器的名字。

而且，从规范中我们还能得知，`[[Class]]`是无法被外部程序访问的。  
![f5f38b18a0f64b6397cd6bf461098239.png][]

# 豁然开朗 #

至于，我们明白了事情的来龙去脉。对象在创建之时，会用内部属性`[[Class]]`记录对象创建时的类型，而且这个内部属性无法被外部程序访问，这意味着它很安全，`Object.prototype.toString`就是利用这个内部属性来检测对象类型的。

[js typeof_instanceof]: https://blog.csdn.net/qq_23365135/article/details/123475357
[Object.prototype.toString]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Luj56CB5ZCbLg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d703b53b9b614e388f0170f4ddee9cd6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Luj56CB5ZCbLg==,size_20,color_FFFFFF,t_70,g_se,x_16
[85ded52e0e1940ada5cf420257d55b06.png]: https://img-blog.csdnimg.cn/85ded52e0e1940ada5cf420257d55b06.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Luj56CB5ZCbLg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/7e42c282dde8488b8d05b87405944fcc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Luj56CB5ZCbLg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Luj56CB5ZCbLg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/b3a2db1215284d5b9de20e2f16aaf693.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Luj56CB5ZCbLg==,size_20,color_FFFFFF,t_70,g_se,x_16
[f5f38b18a0f64b6397cd6bf461098239.png]: https://img-blog.csdnimg.cn/f5f38b18a0f64b6397cd6bf461098239.png