typeof 与 instanceof 区别

文章目录

    • 一、typeof
    • 二、instanceof
    • 三、区别

一、typeof

typeof 操作符返回一个字符串,表示未经计算的操作数的类型

使用方法如下:

typeof operand
typeof(operand)

operand表示对象或原始值的表达式,其类型将被返回

举个例子

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof null // 'object'
typeof [] // 'object'
typeof {} // 'object'
typeof console // 'object'
typeof console.log // 'function'

从上面例子,前6个都是基础数据类型。虽然typeof nullobject,但这只是JavaScript 存在的一个悠久 Bug,不代表null就是引用数据类型,并且null本身也不是对象

所以,nulltypeof之后返回的是有问题的结果,不能作为判断null的方法。如果你需要在 if 语句中判断是否为 null,直接通过===null来判断就好

同时,可以发现引用类型数据,用typeof来判断的话,除了function会被识别出来之外,其余的都输出object

如果我们想要判断一个变量是否存在,可以使用typeof:(不能使用if(a), 若a未声明,则报错)

if(typeof a != 'undefined'){//变量存在
}

二、instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

使用如下:

object instanceof constructor

object为实例对象,constructor为构造函数

构造函数通过new可以实例对象,instanceof能判断这个对象是否是之前那个构造函数生成的对象

// 定义构建函数
let Car = function() {}
let benz = new Car()
benz instanceof Car // true
let car = new String('xxx')
car instanceof String // true
let str = 'xxx'
str instanceof String // false

关于instanceof的实现原理,可以参考下面:

function myInstanceof(left, right) {// 这里先用typeof来判断基础数据类型,如果是,直接返回falseif(typeof left !== 'object' || left === null) return false;// getProtypeOf是Object对象自带的API,能够拿到参数的原型对象let proto = Object.getPrototypeOf(left);while(true) {                  if(proto === null) return false;if(proto === right.prototype) return true;//找到相同原型对象,返回trueproto = Object.getPrototypeof(proto);}
}

也就是顺着原型链去找,直到找到相同的原型对象,返回true,否则为false

三、区别

typeofinstanceof都是判断数据类型的方法,区别如下:

  • typeof会返回一个变量的基本类型,instanceof返回的是一个布尔值

  • instanceof 可以准确地判断复杂引用数据类型,但是不能正确判断基础数据类型

  • typeof 也存在弊端,它虽然可以判断基础数据类型(null 除外),但是引用数据类型中,除了function 类型以外,其他的也无法判断

可以看到,上述两种方法都有弊端,并不能满足所有场景的需求

如果需要通用检测数据类型,可以采用Object.prototype.toString,调用该方法,统一返回格式“[object Xxx]”的字符串

如下

Object.prototype.toString({})       // "[object Object]"
Object.prototype.toString.call({})  // 同上结果,加上call也ok
Object.prototype.toString.call(1)    // "[object Number]"
Object.prototype.toString.call('1')  // "[object String]"
Object.prototype.toString.call(true)  // "[object Boolean]"
Object.prototype.toString.call(function(){})  // "[object Function]"
Object.prototype.toString.call(null)   //"[object Null]"
Object.prototype.toString.call(undefined) //"[object Undefined]"
Object.prototype.toString.call(/123/g)    //"[object RegExp]"
Object.prototype.toString.call(new Date()) //"[object Date]"
Object.prototype.toString.call([])       //"[object Array]"
Object.prototype.toString.call(document)  //"[object HTMLDocument]"
Object.prototype.toString.call(window)   //"[object Window]"

了解了toString的基本用法,下面就实现一个全局通用的数据类型判断方法

function getType(obj){let type  = typeof obj;if (type !== "object") {    // 先进行typeof判断,如果是基础数据类型,直接返回return type;}// 对于typeof返回结果是object的,再进行如下的判断,正则返回结果return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}

使用如下

getType([])     // "Array" typeof []是object,因此toString返回
getType('123')  // "string" typeof 直接返回
getType(window) // "Window" toString返回
getType(null)   // "Null"首字母大写,typeof null是object,需toString来判断
getType(undefined)   // "undefined" typeof 直接返回
getType()            // "undefined" typeof 直接返回
getType(function(){}) // "function" typeof能判断,因此首字母小写
getType(/123/g)      //"RegExp" toString返回

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/750999.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity类银河恶魔城学习记录10-5 p93 Major stats and defensive stats源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释,可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili CharacterStats.cs using System.Collections; using System.Collections…

Vue中的Vnode虚拟Dom一文详解

VNode 是什么? VNode 是 Virtual Node 的缩写,它是 Vue.js 中用来描述真实 DOM 节点的对象。在 Vue 中,每个组件都会被渲染成一个 VNode 树,然后由虚拟 DOM 算法(Virtual DOM Algorithm)将其转化为真实的 …

js 常见基础问题 var、let、const的区别

var、let 和 const 是 JavaScript 中用来声明变量的关键字,它们之间有几个关键的区别: 1.变量提升(Hoisting): var 声明的变量会被提升到作用域的顶部,这意味着你可以在声明之前访问它们,值为 undefined。…

MySQL数据库操作学习(2)表查询

文章目录 一、表查询1.表字段的操作①查看表结构②字段的增加③字段长度/数据类型的修改④字段名的修改⑤删除字符段⑥清空表数据⑦修改表名⑧删除表 2、表数据查询3、where 字段4、聚合函数 一、表查询 1.表字段的操作 ①查看表结构 desc 表名; # 查看表中的字段类型&#…

K8S之持久化存储

持久化存储 支持的持久化存储类型EmptyDirHostPathNFS 在K8S中部署的应用都是以pod容器的形式运行的,假如部署数据库服务 例如:MySQL、Redis等,需要对产生的数据做备份。如果pod不挂载数据卷,那pod被删除或重启后这些数据会随之消…

Windows server Database 2025 安装 i225/i226 网卡驱动

windows这比坏得很,intel消费级网卡不准在服务器系统上安装。你要说他是异构不支持?他就纯粹恶心人。 之前已经安装过一次,但是今天database预览版一更新,又给我把网卡驱动杀了,气死,写一篇教程。 1.去官网…

SQLite优化实践:数据库设计、索引、查询和分库分表策略

文章目录 一、数据库设计优化1.1 合理选择数据类型1.2 使用NOT NULL约束1.3 使用默认值1.4 避免使用过多的列 二、索引优化2.1 为经常用于查询条件的列创建索引2.2 为经常用于排序和分组的列创建索引2.3 避免过多的索引2.4 使用覆盖索引 三、查询优化3.1 使用预编译语句3.2 优化…

​​SQLiteC/C++接口详细介绍之sqlite3类(十一)

返回目录:SQLite—免费开源数据库系列文章目录 上一篇:​​SQLiteC/C接口详细介绍之sqlite3类(十) 下一篇:​​SQLiteC/C接口详细介绍之sqlite3类(十二)(未发表) 33.sq…

LeetCode--14

14. 最长公共前缀 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀,返回空字符串 ""。 示例 1: 输入:strs ["flower","flow","flight"] 输出:"fl"示例…

C语言学习过程总结(18)——指针(6)

一、数组指针变量 在上一节中我们提到了,指针数组的存放指针的数组,那数组指针变量是什么呢? 显而易见,数组指针变量是指针 同样类比整型指针变量和字符指针变量里面分别存放的是整型变量地址和字符变量地址,我们可以…

Helm的资源安装和基本使用

目录 一.Helm的出现 二.Helm工具 1.部署helm 2.helm可用命令介绍 三.chart 1.添加、查看、删除存储库 2.查找chart、查看chart信息、安装chart等 3.安装chart后产生的release 四.安装mysql举例 1.固定chart安装 2.自定义chart安装 一.Helm的出现 在前面的k8s部署po…

13. C++类的简单理解

全面理解C中的类 1. 类的访问属性:public,protect,private C中类的成员变量和函数都带有三种属性中的一种,假如没有特别声明,那么就默认是私有的(除了构造函数)。public表示是公开的&#xff…

[WUSTCTF2020]颜值成绩查询 --不会编程的崽

这题也是一个很简单的盲注题目,这几天sql与模板注入做麻了,也是轻松拿捏。 它已经提示,enter number,所有猜测这里后台代码并没有使用 " 闭合。没有明显的waf提示, 但是or,and都没反应。再去fuzz一…

二叉树OJ练习

本文旨在讲解有关二叉树的OJ题目,希望读完本文,能让读者都二叉树有更深一步的认识! 正文开始! 106. 根据二叉树创建字符串 算法思想: 根据题目的输出结果,可以观察出如下规律! 1.若左右结点都…

Spring Boot整合STOMP实现实时通信

目录 引言 代码实现 配置类WebSocketMessageBrokerConfig DTO 工具类 Controller common.html stomp-broadcast.html 运行效果 完整代码地址 引言 STOMP(Simple Text Oriented Messaging Protocol)作为一种简单文本导向的消息传递协议&#xf…

以调试ffmpeg为例,演示gdb如何定位内存被修改

本文演示了使用gdb定位avformat_find_stream_info函数破坏codecpar变量的问题 1.查看音频或视频stream index【以下以视频为例】 ./ffprobe demo.avi 2>&1 | grep StreamStream #0:0: Video: h264 (High) (H264 / 0x34363248), yuv420p(progressive), 1920x1080, 4021…

sqllab第二十七A关通关笔记

知识点: 双引号闭合union select 大小写绕过 Union Select这里不能进行错误注入,无回显 经过测试发现这是一个双引号闭合 构造payload:id1"%09and%091"1 页面成功回显 构造payload:id0"%09uNion%09SElect%091,2,3%09"1 页面成功…

在雄安新区买新房要注意什么?有哪些注意事项?

雄安新区新建住宅均价每平方米11735元起,二手房每平方米8950元起。 整体价格非常有优势。 雄安新区房价走势与区域发展直接相关。 而且,雄安新区已经成立五周年了。 2022年,雄安新区多项重点项目将陆续竣工。 雄安新区城市基础设施建设已初具…

Linux之shell循环

华子目录 for循环带列表的for循环格式分析示例shell允许用户指定for语句的步长,格式如下示例 不带列表的for循环示例 基于C语言风格的for循环格式示例注意 while循环格式示例 until循环作用格式示例 循环控制breakcontinue详细语法示例 循环嵌套示例 for循环 for循…

深度学习——SAM(Segment-Anything)代码详解

目录 引言代码目录segment-anything 代码详解build_sam.pypredictor.pyautomatic_mask_generator.py 引言 从去年年初至今,SAM(Segment Anything )已经问世快一年了,SAM凭借其强大而突出的泛化性能在各项任务上取得了优异的表现,广大的研究者…