用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的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
在vue中实现嵌套页面(iframe)
Jul 30 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开启gzip页面压缩实例代码
2010/03/11 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Python pandas库中的isnull()详解
2019/12/26 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
母亲追悼会答谢词
2014/01/27 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书