用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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
Vue实现移动端拖拽交换位置
Jul 29 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过滤危险html代码的函数
2008/07/22 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
javascript常用方法汇总
2014/12/02 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python中实现对list做减法操作介绍
2015/01/09 Python
Python爬取读者并制作成PDF
2015/03/10 Python
Python OS模块常用函数说明
2015/05/23 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
运动会通讯稿400字
2014/01/28 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
指导教师评语
2014/04/26 职场文书
社区春季防火方案
2014/06/02 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
同意离婚答辩状
2015/05/22 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
导游词之天津盘山
2019/11/01 职场文书
Python数据类型最全知识总结
2021/05/31 Python
使用Python开发冰球小游戏
2022/04/30 Python