用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 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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 explode函数实例代码
2012/02/27 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
JS日历 推荐
2006/12/03 Javascript
js 对象是否存在判断
2009/07/15 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
javascript如何实现create方法
2019/11/04 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
植物选择:Botanic Choice
2017/02/15 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
小学生元旦广播稿
2014/02/21 职场文书
《刷子李》教学反思
2016/02/20 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS