用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高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
浅谈struts1 & jquery form 文件异步上传
May 25 jQuery
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
javascript实现简易聊天室
Jul 12 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
详解JavaScript类型判断的四种方法
Oct 21 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
php的一个简单加密解密代码
2014/01/14 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
go和python变量赋值遇到的一个问题
2017/08/31 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
给导游的表扬信
2014/01/10 职场文书
小学教师节活动方案
2014/01/31 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
荆州古城导游词
2015/02/06 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
运动会开幕式主持词
2015/07/01 职场文书
护理自荐信
2019/05/14 职场文书