js - typeof与instanceof类型判断的区别

news2024/9/21 22:44:33

1,typeof

描述:运算符返回一个字符串,表示操作数的类型。

常用的类型判断

 	  console.log(typeof 42);           // number
      console.log(typeof "blubber");    // string
      console.log(typeof true);         // boolean
 	  console.log(typeof undefined);    // undefined

      console.log(typeof [1,2,3]);      // object
      console.log(typeof {name:'Eula'});// object
      console.log(typeof null);         // object

缺点也很明显:只能检测简单数据类型,对象、函数和null都统一返回object;

2,instanceof

概念:

instanceof:用于检测构造函数的 prototype 属性是否属于某个实例对象的原型链上;

它有两个必传参数,左侧必须为某个实例对象,右侧必须为某个构造函数。返回值为 Boolean 类型;
这说明instanceof是与原型和原型链有关系的,在弄懂instanceof之前我们就必须要了解什么是原型和原型链;

2.1 prototype(原型)

函数即对象,每个函数都有一个prototype属性,而这个属性就是这个函数的原型对象,在原型对象上定义的属性或方法,会被该函数的实例对象所继承,实例对象可以直接访问到原型对象里面的属性或方法。

2.2 原型链

当实例要访问某一个属性时,首先在实例自身查找,如果没有找到,则继续沿着___proto__对象查找,如果还是没找到,则继续对___proto__的___proto__对象查找,如果找到最终___proto__对象为null时都没找到,就返回属性未找到的错误,如果找到了则返回该属性值。而这个由若干个__proto__对象串联起来的查找路径,就称为原型链。

在这里插入图片描述

2.3 instanceof检测原理:

instanceof的左侧是被检测的对象,右侧是用来判断实例关系的构造函数,而实例的___proto__对象是绝对等于其构造函数的prototype属性的,如果存在隔代关系,那么就要沿着__proto__一层一层的去比较。

说白了,只要右测变量的 prototype 在左测变量的原型链上即可。因此,instanceof>在查找的过程中会遍历左边变量的原型链,直到找到右边变量的 prototype,如果查找失败,则会返回 false。

如下:

创建一个构造函数,判断 Eula 是否属于Person构造函数;

	function Person() {
        this.name = name;
      }
      let Eula = new Person("优菈");
      console.log("Eula.__proto__:", Eula.__proto__);
      console.log("Person.prototype:", Person.prototype);
      console.log(Eula.__proto__ === Person.prototype); // true
      console.log(Eula instanceof Person); // true

打印如下:
在这里插入图片描述
可以看出 : Eula.proto === Person.prototype 所以判断成立;

2.4 instanceof常用的判断

JavaScript中的String、Object、Number、Array、Function、Date、Boolean、RegExp、Error等都是JS内置的构造函数,在JS中由于一切皆接对象,所以它们也可以称为内置对象;

一些常见的判断如下:

		// 判断字符串 -- 不能使用自变量创建否则直接返回false 需要 new String()
        console.log('123' instanceof String);            //false  
        console.log(new String(123) instanceof String);  //true
        
        // 判断数字 --也不能使用自变量创建也会直接返回false 也需要 new Number()
        console.log(123 instanceof Number);  //false  
        console.log(new Number(123) instanceof Number);  //true

        // 判断对象
        console.log({ name: "Eula" } instanceof Object); // true

       // 判断数组 数组也属于Object类型所以这两个都成立   建议使用Object.prototype.toString来判断数组
        console.log([1, 2, 3] instanceof Array);         // true
        console.log([1, 2, 3] instanceof Object);        // true

        // 判断日期 Date对象也属于Object 类型
        console.log(new Date() instanceof Date);         // true
        console.log(new Date() instanceof Object);       // true
        
        // 函数的判断
        function test () {} 
        console.log(test instanceof Function );         // true
        
        // null的判断 发现它竟然不是一个对象 使用typeof判断时它还是一个对象  建议使用typeof 来判断null类型
        console.log(null instanceof Object); 

误区(需要铭记):使用instanceof不能判断简单的数据类型,既使左侧和右侧是完全相等的,也依旧返回 false ,如下:

 console.log("123".__proto__ === String.prototype); // true  这是符合instanceof判断原理的 
 //依旧返回false instanceof方法好像不允许判断简单数据类型(比如String,Number)
 console.log('123' instanceof String);  // fasle

 console.log((123).__proto__ === Number.prototype); // true
 console.log(123 instanceof Number); 				//false

instanceof方法好像不允许判断简单数据类型(比如String,Number)

2.5 手动实现 instanceof 方法

既然知道了原理,那么就可以手动实现了,如下:

/**
  	* @description 判断对象是否属于某个实例对象的原型链上
 	* @prams L: 实例对象  R: 构造函数或内置对象(String、Object、Number、Array、Function等)
  	* @return boolean
	*/	
	function _instancof(L, R) {
        // 简单数据类型直接返回false
        if (typeof L !== "object") return false;
        let left = L.__proto__;
        let right = R.prototype;
        while (true) {
          if (left === null) {
            return false;
          }
          if (left === right) {
            return true;
          }
          // 如果本轮没找到,则沿着__proto__继续向上查找
          left = left.__proto__;
        }
      }

使用如下:

  console.log(_instancof({ name: "Eula" }, Object));//true
  console.log(_instancof(new Number(123), Number)); //true
  console.log(_instancof(new Date(), Object));  	//true

End;

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

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

相关文章

【Linux】Linux入门学习之常用命令一

介绍 这里是小编成长之路的历程,也是小编的学习之路。希望和各位大佬们一起成长! 以下为小编最喜欢的两句话: 要有最朴素的生活和最遥远的梦想,即使明天天寒地冻,山高水远,路远马亡。 一个人为什么要努力&a…

stable diffusion 安装教程

stable diffusion安装教程 环境准备硬件要求安装软件Python 安装安装git安装cuda工具安装工具包模型下载 生成图片成果展示 环境准备 硬件要求 1.需要拥有NVIDIA显卡,GT1060起,显存4G以上。(已经不需要3080起,亲民不少&#xff0…

中文润色ai-ai原创文章生成器

在现代社会,每天都有大量的中文文章被发布到互联网上,这些文章的质量和可读性直接影响着读者的阅读体验和文章的传播效果。为了让文章更加美好,越来越多的人开始尝试使用中文润色ai技术。 中文润色ai是一种先进的人工智能技术,它能…

OA办公系统能为企业带来什么好处?

在企业办公管理软件当中,OA系统一直都是最受欢迎也是很多大中型企业不可或缺的管理系统。企业OA办公系统是将计算机、通信等现代化技术运用到传统办公方式,进而形成的一种新型办公方式。办公自动化利用现代化设备和信息化技术,代替办公人员传…

10分钟拥有自己的Chatgpt网站(八)

文章目录 使用Vercel托管平台搭建免费Chatgpt网站前言Fork chatgpt-vercel 到自己的github把 chatgpt-vercel 托管到vercel平台注意vercel分配的域名被墙,需要我们自己去配置自己的域名:总结使用Vercel托管平台搭建免费Chatgpt网站 前言 需要有github账户,进行对开源项目进…

vue3学习六 hooks

vue3中的 hooks 它的作用, 有点像 vue2中的mixins 的作用 相当于是把一个功能性的一组方法, 封装的别的地方, 当每一个 component中需要用到相应的组件的时候, 可以很方便用引入其中来使用 举个栗子 我们有很多的页面&#xff0c…

虚拟面试系统安装使用说明

虚拟面试系统安装使用说明 虚拟面试系统是程序员参加面试的虚拟系统,该软件中的测试题只针对程序员设计,不针对其它人员。面试流程可适用于所有大众行业。 一.安装与卸载 1.安装 本软件只有安装之后,才能运行。 安装方…

【Golang】排查 Build constraints exclude all the go files 的几个思路

输出该问题时说明在 Go 语言的启动编译(Build)阶段,出现了编译问题,往往是编译配置的问题。可以通过以下思路去排查对应的错误。 一、查看 go env 😶‍🌫️ (1)首先可以查看被排除的…

【iOS开发】理解OC的类,父类,元类的关系

文章目录 前言1.1 类和对象的关系2.1 类的结构体2.2对象的结构体2.2.1元类2.2.2 涉及消息转发机制2.2.3 元类也有类2.3.4 对象和Class的 isa指针 前言 在OC中,有对象objc,有类Class,有父类SuperClass,其实还有一种元类MetaClass。…

嚯——ChatGPT是很强,但也会胡说八道。。。

现在的ChatGPT确实强,但是也会一本正经的胡说八道,例如它回答“nineteen”中有12个字母、或是旗鱼是哺乳动物…… 尽管ChatGPT可以生成流畅甚至优雅的散文,轻松通过困扰了AI领域超过70年的图灵测试基准,但它也可能看起来非常愚蠢…

【设计模式】| 修炼内功 | 23种设计模式——单例模式

设计模式如同织锦之艺术,精心构筑,展示优美。 学习设计模式,犹如追逐清晨的曙光,扉页掀开了人生的新篇章。当你学会设计模式的奥秘,就如同走进了灯火通明的城市,丰富多彩的建筑,让你大开眼界&am…

Postman安装及入门接口测试使用步骤

前言 在软件测试行业中,作为一款比jemter更便捷更好用的软件测试工具,postman以其便捷灵活性首当其冲,成为当今测试行业领域使用较广泛的主流系统软件接口测试工具。今天Darren洋为大家讲解postman这款软件测试工具的下载安装及入门接口测试步…

Sentinel实现动态配置的集群流控的方法

Sentinel实现动态配置的集群流控的方法 介绍 06-cluster-embedded-8081 为什么要使用集群流控呢? 相对于单机流控而言,我们给每台机器设置单机限流阈值,在理想情况下整个集群的限流阈值为机器数量✖️单机阈值。不过实际情况下流量到每台…

拉绳位移传感器连接到PLC并采集数据到物联网云平台

拉绳位移传感器是一种利用绳材收卷轮周长来计量物体长度或距离的传感器设备,其作用就像是一把卷尺,通过拉绳的长度变化测出位移量,并转换为数字量提供到电子信息系统中,在建筑、水利、地质勘察、采矿、制造加工以及渔业等广泛应用…

elementUI中折叠面板箭头图标位置调整到最左边

跟flex布局有关 原始代码 <div id"app"> <el-collapse v-model"activeNames" change"handleChange"><el-collapse-item title"一致性 Consistency" name"1"><div>与现实生活一致&#xff1a;与现…

Centos8下编译安装最新版ffmpeg解决方案(含Centos8换源阿里云)

文章目录 1、下载FFmpeg源代码2、安装依赖3、配置编译选项&#xff08;关键&#xff09;linux依赖手动编译安装centos8换源阿里云 4、编译源代码5、安装FFmpeg6、验证安装 1、下载FFmpeg源代码 FFmpeg官网&#xff08;https://ffmpeg.org/download.html&#xff09;git clone …

python数据分析案例——天猫订单综合分析

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 什么是数据分析 明确目的–获得数据(爬虫&#xff0c;现有&#xff0c;公开的数据)–数据预处理——数据可视化——结论 准备 环境使用&#xff1a; 在开始写我们的代码之前&#xff0c;我们要准备好运行代码的程序 Anacon…

Java Stream API的基本使用方法

前言 Java各个版本所更新的主要内容&#xff1a; 1.Java SE 8&#xff1a;引入了一些新特性&#xff0c;如lambda表达式、Stream API、格式化日期、国际化等。此外&#xff0c;还对并发编程进行了改进&#xff0c;引入了线程安全的Stream API。 2.Java SE 9&#xff1a;新增了…

李沐论文精度系列之十:GPT-4

文章目录 一、AIGC资讯速览1.1 Toolformer&#xff08;2023.2.9&#xff09;1.2 ChatGPT plugin1.3 LLaMA&#xff08;2023.2.24&#xff09;1.4 Visual ChatGPT&#xff08;2023.3.8&#xff09;1.5 GigaGAN&#xff08;2023.3.9&#xff09;1.6 Stanford Alpaca&#xff08;2…

面试官:详细说一下Java语言层面3种IO模型的实现

在Java中&#xff0c;一共有三种IO模型&#xff0c;分别是阻塞IO(BIO)、非阻塞IO(NIO)和异步IO(AIO)。 Linux五种IO模型和Java三种IO模型 Java BIO Java BIO就是Java的传统IO模型&#xff0c;对应了操作系统IO模型里的阻塞IO。 Java BIO相关的实现都位于java.io包下&#xf…