这几天看vue-router的源码 发现了Object.prototype.toString.call()这样的用法,当时以为这就是转成字符串的用的,但是越看越觉得不太对劲,赶紧查查资料,一查才知道没那么简单.

首先在Object.prototype.toString方法被调用时,会执行下面的操作步骤:

1. 获取this对象的[[Class]]属性的值.

2. 计算出三个字符串"[object ", 第一步的操作结果Result(1), 以及 "]"连接后的新字符串.

3. 返回第二步的操作结果Result(2).

[[Class]]是一个内部属性,所有的对象(原生对象和宿主对象)都拥有该属性.在规范中,[[Class]]是这么定义的

内部属性 描述
[[Class]] 一个字符串值,表明了该对象的类型.

看这里重点: [[Class]] 表明了该对象的类型

而且除了通过Object.prototype.toString方法之外,没有提供任何其他方式来让程序访问该属性的值. 看到这里我就想到了 Object.prototype.toString 是不是可以用来检测对象的类型,而且vue-router源码里面正好就是用来检测对象类型的.

等等 隐约记得 typeof 和 instanceof 也是用来检测类型的  后来查阅资料


typeof 只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种。

对于数组、对象来说,其关系错综复杂,使用 typeof 都会统一返回 “object” 字符串。


instanceof

可以检测自定义类型 但是检测的必须是对象( Object ).  比如如果想检测 a是什么类型  要先检测他是否是Object 类型 然后才能用instanceof , 这就麻烦了.


而Object.prototype.toString就没有这么多限制.

[[Class]]属性的值可以是除了 "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"之外的的任何字符串

看下面的例子

下面是实战:

console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]
console.log(Object.prototype.toString.call(null)) //[object Null 什么类型都可以,完美.

最后加个 toString()的知识点 直接看演示:

如果不带括号 直接对 1 使用 toStirng()的时候   会把.当做小数点 然后报错   所以应该使用 1..toString();

Object.prototype.toString.call(obj)使用方法以及原理的更多相关文章

  1. 为什么用Object.prototype.toString.call(obj)检测对象类型?

    最近做了做一些js面试25 Essential JavaScript Interview Questions*,其中第一道是:使用typeof bar === "object"检测 ...

  2. Object.prototype.toString.call(obj)检测数据类型

    typeof bar=='object' 不能确切判断数据是一个‘纯粹’的对象 Array null的结果都是object 比较好的方法是: Object.prototype.toString.cal ...

  3. 用Object.prototype.toString.call(obj)检测对象类型原因分析

    用Object.prototype.toString.call(obj)检测对象类型原因分析  更新时间:2018年10月11日 08:46:33   投稿:laozhang    我要评论   在本 ...

  4. Object.prototype.toString.call(obj).slice(8,-1)

    1.Object.prototype.toString() 该方法返回描述某个对象数据类型的字符串,如自定义的对象没有被覆盖,则会返回“[object type]”,其中,type则是实际的对象类型. ...

  5. 数据类型的判断 --Object.prototype.toString.call(obj)精准检测对象类型

    数据类型的判断 typeof typeof返回一个表示数据类型的字符串,返回结果包括:number.boolean.string.symbol.object.undefined.function等7种 ...

  6. js Object.prototype.toString.call()

    Object.prototype.toString.call(obj)使用方法以及原理   这几天看vue-router的源码 发现了Object.prototype.toString.call()这 ...

  7. 从toString()方法到Object.prototype.toString.call()方法

    一.toString方法和Object.prototype.toSting.call()的区别 var arr=[1,2]; 直接对一个数组调用toString()方法, console.log(ar ...

  8. instanceof, typeof, & Object.prototype.toString

    /** * * @authors Your Name (you@example.org) * @date 2016-11-18 09:31:23 * @version $Id$ */instanceo ...

  9. 图形验证码知识点整理 Object.prototype.toString.call()等

    使用typeof bar === "object"检测”bar”是否为对象有什么缺点?如何避免?这是一个十分常见的问题,用 typeof 是否能准确判断一个对象变量,答案是否定的, ...

随机推荐

  1. Java安装和环境变量配置

    一.Java的安装 1.下载合适的版本,安装jdk和jre到同一路径下的同一文件夹下,例如:都安装在 E:\Java: 备注:  JDK:Java Development Kit :  JRE: Ja ...

  2. 很全的atom问题解决方案

    atom插件 http://blog.csdn.net/qq_30100043/article/details/53558381 atom社区 https://atom-china.org/

  3. flex布局简析

    最近开始对flex布局进行一个重新的认识. 首先. flex布局适用于所有元素 但是注意一点的就是,一旦父级元素设定flex布局的时候,子元素的传统布局属性, float,clear,vertical ...

  4. php的错误日志级别 error_report(转)

    ; E_ALL 所有错误和警告(除E_STRICT外); E_ERROR 致命的错误.脚本的执行被暂停.; E_RECOVERABLE_ERROR 大多数的致命错误.; E_WARNING 非致命的运 ...

  5. markdown语法小结

    引用数学公式1 \[ \begin{equation} \pi^2=x^2+y \label{eq_lab1} \end{equation} \] Here we cite this equation ...

  6. echarts地图的引用

    最近是跟echarts杠上了 所在公司是搞数据的 所以身为前端的我 就必须使用echarts将数据展示出来 ,进公司一周 ,前前后后大概用了八九种echarts图,我举得最难的就是引用的地图,因为刚开 ...

  7. 【剑指Offer学习】【面试题:二维数组中的查找】PHP实现

    最近一直看剑指Offer.里面很多算法题.于是就想着用PHP来显示一下. 题目: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序. 请完成一个函数,输入这样的 ...

  8. alpha冲刺总结随笔

    前言:前面乱乱糟糟整了一路,到最后终于可以稳定下来了.安安心心做个总结,然后把之后要做的事情都理清楚好了. 新学长似乎是个正经[并不]大腿. 看起来也不用都是一个人或者跟陈华学长两个人对半开了[突然摸 ...

  9. 团队作业7——Beta版本冲刺计划及安排

    上一个阶段的总结: 在Alpha阶段,我们小组已近完成了大部分的功能要求,小组的每一个成员都发挥了自己的用处.经过了这么久的磨合,小组的成员之间越来越默契,相信在接下来的合作中,我们的开发速度会越来越 ...

  10. Python实现栈

    栈的操作 Stack() 创建一个新的空栈 push(item) 添加一个新的元素item到栈顶 pop() 弹出栈顶元素 peek() 返回栈顶元素 is_empty() 判断栈是否为空 size( ...