Object.prototype.toString方法精确判断对象的类型_object.prototype.tostring获取类型-程序员宅基地

技术标签: JavaScript  判断对象类型  

在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 "number","string","undefined","boolean","object","function","symbol" (ES6新增)七种。

对于 数组、null、对象,使用 typeof 都会统一返回 "object" 字符串。

要想区别 对象、数组、函数 单纯使用 typeof 是不行的,JavaScript中,通过Object.prototype.toString方法,判断某个对象值属于哪种内置类型。

toString()方法和Object.prototype.toString.call()方法对比

var arr=[1,2];

//直接对一个数组调用toString()
arr.toString();// "1,2"

//通过call指定arr数组为Object.prototype对象中的toString方法的上下文
Object.prototype.toString.call(arr); //"[object Array]"

Object.prototype中的toString方法被数组Array继承下来了,作为 儿子的数组 重写了toString方法,所以直接调用数组对象上面的toString方法调用到的实际是重写后的方法,并不是Object.prototype中的toString方法。

重写后的toString方法可以把对象转换成字符串,还可以把数值转换成不同进制的数。

[1,2].toString();// "1,2"  得到字符串

(10).toString(2);//10进制转2进制 1010 ,如果1.toString(2)会报错,因为js会认为.是数字的小数点而不是调用符号

为什么toString会有不同的作用?

这里面就涉及到js原型及原型链的相关知识。

var arr=[1,2,3];
Object.prototype.toString.call(arr);
Array.prototype.toString.call(arr);

在这里插入图片描述
所以,只有Object.prototype上的toString才能用来进行复杂数据类型的判断。

原型链的概念

js中的对象都继承自Object,所以当我们在某个对象上调用一个方法时,会先在该对象上进行查找,如果没找到则会进入对象的原型(也就是.prototype)进行查找,如果没找到,同样的也会进入 对象原型的原型 进行查找,直到找到或者进入原型链的顶端Object.prototype才会停止。

所以,当我们使用arr.toString()时,不能进行复杂数据类型的判断,因为它调用的是Array.prototype.toString,虽然Array也继承自Object,但js在Array.prototype上重写了toString,而我们通过toString.call(arr)实际上是通过原型链调用了Object.prototype.toString

对常用值类型应用 Object.prototype.toString.call() 方法结果如下:

Object.prototype.toString.call(123)    //[object Number]
Object.prototype.toString.call('123')    //[object String]
Object.prototype.toString.call(undefined)    //[object Undefined]
Object.prototype.toString.call(true)    //[object Boolean]
Object.prototype.toString.call({
    })    //[object Object]
Object.prototype.toString.call([])    //[object Array]
Object.prototype.toString.call(function(){
    })    //[object Function]
Object.prototype.toString.call(null)    //[[object Null]]

实际应用:

function deepClone(data) {
    
    const type = this.judgeType(data);
    let obj = null;
    if (type == 'array') {
    
        obj = [];
        for (let i = 0; i < data.length; i++) {
    
            obj.push(this.deepClone(data[i]));
        }
    } else if (type == 'object') {
    
        obj = {
    };
        for (const key in data) {
    
            if (data.hasOwnProperty(key)) {
    
                obj[key] = this.deepClone(data[key]);
            }
        }
    } else {
    
        return data;
    }
    return obj;
}

function judgeType(data) {
    
    const toString = Object.prototype.toString;
    const map = {
    
        '[object Boolean]': 'boolean',
        '[object Number]': 'number',
        '[object String]': 'string',
        '[object Function]': 'function',
        '[object Array]': 'array',
        '[object Date]': 'date',
        '[object RegExp]': 'regExp',
        '[object Undefined]': 'undefined',
        '[object Null]': 'null',
        '[object Object]': 'object'
    }
    const type = map[toString.call(data)];
    return type;
}

let test = {
    
    a: 'happy chen',
    hobby: ['跑步', '看书', '五子棋'],
    foods: {
    
        fruit: ['雪莲果', '柚子', '香蕉']
    }
}

console.log(deepClone(test));
test.foods.fruit[0] = '南果梨';
console.log(test);
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u013565133/article/details/102832148

智能推荐

QGIS:利用等高线生成dem_qgis等高线生成dem-程序员宅基地

文章浏览阅读3.4k次。QGIS:利用等高线生成dem打开QGIS,首先导入等高线的线文件,确保属性表里有高程这项数据,笔者导入的是云浮的等高线,源文件分成了5个图层,关键字段均是elev。将等高线合并到一个图层,步骤为矢量-数据管理工具-合并矢量图层,选择合并的图层即可,英文版的朋友自行翻译(等高线只有一个图层的小伙伴可以跳过这步)。 合并后的图层 放大后是这样的合并完成后,进行矢量转栅格操作,这步是核心,栅格-转换-矢量栅格化(矢量转栅格),然后把必要的信息填上,记得选择的关键字_qgis等高线生成dem

windbg调试命令_windbg exe模块-程序员宅基地

文章浏览阅读1.1k次。#调试命令窗口 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++#使用gflags.exe工具(在windbg所在目录下),让某个进程启动时,拉取windbg进行调试如下截图:当名称为captcomm.exe的进程启动时,拉起windbg调试也可通过脚本命令来实现:// 运行c_windbg exe模块

基于php微信小程序购物商城 校园二手商品 图书鲜花商城 毕业设计(1)首页_小程序校园购物平台页面-程序员宅基地

文章浏览阅读1.1k次,点赞2次,收藏17次。效果图wxml代码<!--轮播:远程数据(图片地址+连接地址)【对象数组,数组中的每个元素包含图片地址+链接地址】--><view ><!--swiper属性里面的设置相比上面,多了个if判断是否显示,jieguo=true; jieguo2=false--><!--远程数据地址:http://phpshop.yaoyiwangluo.com/wx_lunbo.php--><swiper indicator-dots="{{indicato_小程序校园购物平台页面

Java分布式锁_java 分布式锁-程序员宅基地

文章浏览阅读3.3k次,点赞7次,收藏30次。1.什么是锁?在单进程的系统中,当存在多个线程可以同时改变某个变量(可变共享变量)时,就需要对变量或代码块做同步,使其在修改这种变量时能够线性执行消除并发修改变量。而同步的本质是通过锁来实现的。为了实现多个线程在一个时刻同一个代码块只能有一个线程可执行,那么需要在某个地方做个标记,这个标记必须每个线程都能看到,当标记不存在时可以设置该标记,其余后续线程发现已经有标记了则等待拥有标记的线程结束同步代码块取消标记后再去尝试设置标记。这个标记可以理解为锁。不同地方实现锁的方式也不一样,只要能满足所有线程都_java 分布式锁

进制之间的相互转换(超详细)_进制转换-程序员宅基地

本篇文章介绍了十进制与其他进制之间的相互转换方法,包括十进制转换为二进制、八进制、十六进制,以及其他进制转换为十进制的方法。同时还提供了一些具体的转换示例。

课后习题1-数据结构_简述逻辑结构的四种基本关系并画出它们的关系图-程序员宅基地

文章浏览阅读4k次,点赞11次,收藏26次。1.概念:数据:Data,是客观事物的符号表示,是所有能输入到计算机中并被计算机程序处理的符号的总称。数据元素:Data Element,是数据的基本单位,在计算机中常作为一个整体进行考虑和处理,用于完整的描述一个对象。数据项:Data Item,是组成数据元素的、有独立含义的、不可分割的最小单位。数据对象:Data Object,是性质相同的数据元素的集合,是数据的一个子集。数据结构:Data Structure,是相互之间存在一种或多种特定关系的数据元素的集合。逻辑结构:从具体问题抽象出来的_简述逻辑结构的四种基本关系并画出它们的关系图

随便推点

UE4基础学习笔记———零碎知识02_ue绿色碰撞那个叫什么-程序员宅基地

文章浏览阅读641次。地形模式地形模式,选择ground材质,大小,创建。默认雕刻工具雕刻地面(默认凸出,shift凹陷)。2.新建地形,赋予水材质。运用各种工具进行地形处理。植被模式资源找到树木,花草,石头等物体。放入。树木沿着表面法线方向生长了,需要修改。单击绘制对象,修改Z高度随机,关闭对齐法线。 2.树木设置碰撞。(一般来说碰撞是后期才去设置的)。设置为BlockAll..._ue绿色碰撞那个叫什么

hadoop记录篇10-数据仓库查询组件impala-程序员宅基地

文章浏览阅读294次。一。impala架构 Impala是Cloudera在受到Google的Dremel启发下开发的实时交互SQL大数据查询工具,Impala没有再使用缓慢的Hive+MapReduce批处理,而是通过使用与商用并行关系数据库中类似的分布式查询引擎(由Query Planner、Query Coordinator和Query Exec Engine三部分组成),..._impala does not have read and write permissions on this directory

SQL语句左连接LEFT OUTER JOIN的作用_left outer join 的效果-程序员宅基地

文章浏览阅读7.8k次。SQL在联表查询的时候,如果遇到字表的数据是没有的,如果是普通的查询就会出现一种查不到数据的情况,这时候就需要用到联表查询的使用左连接指向主表(左右连接看功能的具体需求),我的情况是主表连接多个子表(这些表是查询下拉框的数据),因为总有用户会不选上某一个的下拉框的情况,这样就会在修改时绑定数据的时候就会出现数据绑不上的情况我们就可以使用左连接,然后就可以查询到有的数据,就不会受到没有的数..._left outer join 的效果

linux分段内存管理中的GDT,LDT,GDTR,LDTR-程序员宅基地

文章浏览阅读2.9k次,点赞8次,收藏17次。本文是对上一篇文章《逻辑地址、线性地址、物理地址的关系以及段寄存器在不同位数CPU中的用途演变以及GDT LDT PGD PT的关系》的补充。一. 寻址方式:实地址模式和保护地址模式我们知道,内存寻址模式在早期是采用的实地址模式(intel 80286之前),后面发展到了保护模式(80286开始)。在8086的时候,也就是16位cpu的时候,CPU配备了4个16位段寄存器(CS代码段寄存器..._ldtr

JSP中的EL表达式报错org.apache.jasper.JasperException_org.apache.jasper.jasperexception: 在 [31] 行处理 [/re-程序员宅基地

文章浏览阅读1.9k次。1、报错场景:在jsp中使用el表达式时,出现JasperException异常。2、报错信息:org.apache.jasper.JasperException: 在 [45] 行处理 [/register.jsp] 时发生异常42: <td style="width:40%">43: <input type="text" clas..._org.apache.jasper.jasperexception: 在 [31] 行处理 [/register1.jsp] 时发生异

H5(html5)入门教程_html5教程-程序员宅基地

文章浏览阅读9.9k次,点赞14次,收藏94次。html零基础01_html5教程

推荐文章

热门文章

相关标签