用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 相关文章推荐
JQuery 常用方法基础教程
Feb 06 Javascript
document.getElementById介绍
Sep 13 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 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
第三节--定义一个类
2006/11/16 PHP
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
js面向对象编程总结
2017/02/16 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
Vue精简版风格概述
2018/01/30 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python实现某论坛自动签到功能
2019/08/20 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Python如何转换字符串大小写
2020/06/04 Python
详解python中的lambda与sorted函数
2020/09/04 Python
python中PyQuery库用法分享
2021/01/15 Python
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
职业女性的职业规划
2014/03/04 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
高三毕业评语
2014/12/31 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
Python中rapidjson参数校验实现
2021/07/25 Python
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android