用Object.prototype.toString.call(obj)检测对象类型原因分析


Posted in Javascript onOctober 11, 2018

这是一个十分常见的问题,用 typeof 是否能准确判断一个对象变量,答案是否定的,null 的结果也是 object,Array 的结果也是 object,有时候我们需要的是 "纯粹" 的 object 对象。如何避免呢?比较好的方式是:

console.log(Object.prototype.toString.call(obj) === "[object Object]");

使用以上方式可以很好的区分各种类型:

(无法区分自定义对象类型,自定义类型可以采用instanceof区分)

console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]

为什么这样就能区分呢?于是我去看了一下toString方法的用法:toString方法返回反映这个对象的字符串。

那为什么不直接用obj.toString()呢?

console.log("jerry".toString());//jerry
console.log((1).toString());//1
console.log([1,2].toString());//1,2
console.log(new Date().toString());//Wed Dec 21 2016 20:35:48 GMT+0800 (中国标准时间)
console.log(function(){}.toString());//function (){}
console.log(null.toString());//error
console.log(undefined.toString());//error

同样是检测对象obj调用toString方法(关于toString()方法的用法的可以参考toString的详解),obj.toString()的结果和Object.prototype.toString.call(obj)的结果不一样,这是为什么?

这是因为toString为Object的原型方法,而Array ,function等类型作为Object的实例,都重写了toString方法。不同的对象类型调用toString方法时,根据原型链的知识,调用的是对应的重写之后的toString方法(function类型返回内容为函数体的字符串,Array类型返回元素组成的字符串.....),而不会去调用Object上原型toString方法(返回对象的具体类型),所以采用obj.toString()不能得到其对象类型,只能将obj转换为字符串类型;因此,在想要得到对象的具体类型时,应该调用Object上原型toString方法。

我们可以验证一下,将数组的toString方法删除,看看会是什么结果:

var arr=[1,2,3];console.log(Array.prototype.hasOwnProperty("toString"));//true
console.log(arr.toString());//1,2,3
delete Array.prototype.toString;//delete操作符可以删除实例属性
console.log(Array.prototype.hasOwnProperty("toString"));//false
console.log(arr.toString());//"[object Array]"

删除了Array的toString方法后,同样再采用arr.toString()方法调用时,不再有屏蔽Object原型方法的实例方法,因此沿着原型链,arr最后调用了Object的toString方法,返回了和Object.prototype.toString.call(arr)相同的结果。

Javascript 相关文章推荐
javascript 随机展示头像实现代码
Dec 06 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
各种常用的JS函数整理
Oct 25 Javascript
js 走马灯简单实例
Nov 21 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
javascript头像上传代码实例
Sep 28 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 #Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 #Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 #Javascript
vue环形进度条组件实例应用
Oct 10 #Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 #Javascript
详解Node.js读写中文内容文件操作
Oct 10 #Javascript
angular6的响应式表单的实现
Oct 10 #Javascript
You might like
PHP 木马攻击防御技巧
2009/06/13 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
js select option对象小结
2013/12/20 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
javascript中clone对象详解
2014/12/03 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
python 生成器需注意的小问题
2020/09/29 Python
Python读写Excel表格的方法
2021/03/02 Python
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
民主评议政风行风整改方案
2014/09/17 职场文书
实习工作表现评语
2014/12/31 职场文书
投诉信范文
2015/07/02 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
Python数据处理的三个实用技巧分享
2022/04/01 Python