第三话:JS中instanceof的原理和实现

摘要

想必各位一定在面试中遇到这样的问题:

【1】JS中的数据类型都有哪些
【2】判断数据类型的方法有哪些

当你回答了typeof 和 instanceof 之后,面试官一定又会问:

那typeof 和 instanceof 的区别是什么,instanceof的原理是什么,可以简单实现一下吗?

你肯定知道,typeof是用来判断基本数据类型,而instanceof是用来判断引用数据类型。这个我们就不再赘述了。

如果你再看过一些面经或者文章,一定也知道instanceof的原理是什么。那我们如何用代码来将instanceof实现出来呢?

1.手写instanceof

我们先解释一下instanceof的原理:

当判断一个对象是否为一个类的实例时,我们会沿着对象的原型链一层层向上找,看是否有指向类的原型,直到原型链的尽头。

好像有点弯弯绕绕啊,那我们就换一种风格来解释:

当判断一个obj是否为一个class的实例时,我们会验证obj的__proto__一层层向上找,看是否有一个__proto__ === class 的 prototype。直到找到的__proto__ 为 null。

如果你理解了这一段话,那么instanceof的实现不就是手到擒来了吗!

只需要来一个while循环。

function _istanceof(obj, type) {if (typeof obj !== 'object' || obj === null) {return false;
}while (obj) {if (obj.__proto__ === type.prototype) {return true;}obj = obj.__proto__;
}return false;}

2.Object.prototype.toString.call()

一般如果面试官问到了这里,其实肯定还有一问等着你呢。

instanceof有什么问题吗,还有别的判断数据类型的方法吗

当我们知道了instanceof是通过原型链向上查找的原理后,就能理解其实他是有一些不稳定的,因为在原型链上某一节上出现了问题,就会导致判断类型的错误。

所以,有一种更为准确的方法来判断数据类型,甚至它能同时判断基本数据类型和引用数据类型。甚至它连null都可以识别出来。

他就是Object.prototype.toString.call()。

比如你想判断一下一个对象是否为数组类型只需要:
Object.prototype.toString.call([]) === '[object Array]';

同理,你也可以把其他的数据类型都试试。

最后,希望这一篇文章对你能有所帮助,笔芯❤️。

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

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

相关文章

Spring Boot编程训练系统:性能优化实践

摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了编程训练系统的开发全过程。通过分析编程训练系统管理的不足,创建了一个计算机管理编程训练系统的方案。文章介绍了编程训练系统的系统分析部分&…

电子应用产品设计方案-4:基于物联网和人工智能的温度控制器设计方案

一、概述 本温度控制器旨在提供高精度、智能化、远程可控的温度调节解决方案,适用于各种工业和民用场景。 二、系统组成 1. 传感器模块 - 采用高精度的数字式温度传感器,如 TMP117,能够提供精确到 0.01C 的温度测量。 - 配置多个传感器分布在…

如何在 Ubuntu 24.04 上安装和配置 Fail2ban ?

确保你的 Ubuntu 24.04 服务器的安全是至关重要的,特别是如果它暴露在互联网上。一个常见的威胁是未经授权的访问尝试,特别是通过 SSH。Fail2ban 是一个强大的工具,可以通过自动阻止可疑活动来帮助保护您的服务器。 在本指南中,我…

同三维T610UDP-4K60 4K60 DP或HDMI或手机信号采集卡

1路DP/HDMI/TYPE-C(手机/平板等)视频信号输入1路MIC1路LINE OUT,带1路HDMI环出,USB免驱,分辨率4K60,可采集3路信号中其中1路,按钮切换,可采集带TYPE-C接口的各品牌手机/平板/笔记本电脑等 同三维…

Kafka--关于broker的夺命连环问

目录 1、zk在kafka集群中有何作用 2、简述kafka集群中的Leader选举机制 3、kafka是如何处理数据乱序问题的。 4、kafka中节点如何服役和退役 4.1 服役新节点 1)新节点准备 2)执行负载均衡操作 4.2 退役旧节点 5、Kafka中Leader挂了,…

Web项目版本更新及时通知

背景 单页应用,项目更新时,部分用户会出更新不及时,导致异常的问题。 技术方案 给出版本号,项目每次更新时通知用户,版本已经更新需要刷新页面。 版本号更新方案版本号变更后通知用户哪些用户需要通知?…

Android音视频直播低延迟探究之:WLAN低延迟模式

Android WLAN低延迟模式 Android WLAN低延迟模式是 Android 10 引入的一种功能,允许对延迟敏感的应用将 Wi-Fi 配置为低延迟模式,以减少网络延迟,启动条件如下: Wi-Fi 已启用且设备可以访问互联网。应用已创建并获得 Wi-Fi 锁&a…

Appium配置2024.11.12

百度得知:谷歌从安卓9之后不再提供真机layout inspector查看,仅用于支持ide编写的app调试用 所以最新版android studio的android sdk目录下已经没有了布局查看工具... windows x64操作系统 小米k30 pro手机 安卓手机 Android 12 第一步&#xff1a…

前端使用Canvas实现网页电子签名(兼容移动端和PC端)

实现效果: 要使用Canvas实现移动端网页电子签名,可以按照以下步骤: 在HTML文件中创建一个Canvas元素,并设置其宽度和高度,以适配移动设备的屏幕大小。 // 创建一个canvas元素 let canvas document.createElement(&q…

使用 Python 实现高效网页爬虫——从获取链接到数据保存

前言 在这个时代,网络爬虫已成为数据分析与信息收集不可或缺的技术之一。本文将通过一个具体的Python项目来介绍如何构建一个简单的网络爬虫,它能够自动抓取指定网站的文章链接、标题、正文内容以及图片链接,并将这些信息保存为CSV文件。 目标网站 一、准备工作 在开始编…

跟着尚硅谷学vue2—进阶版4.0—Vuex1.0

5. Vuex 1. 理解 Vuex 1. 多组件共享数据-全局事件总线实现 红线是读&#xff0c;绿线是写 2. 多组件共享数据-vuex实现 vuex 不属于任何组件 3. 求和案例-纯vue版 核心代码 1.Count.vue <template><div><h1>当前求和为&#xff1a;{{ sum }}</h1&…

HTML之列表

练习题&#xff1a; 图所示为一个问卷调查网页&#xff0c;请制作出来。要求&#xff1a;大标题用h1标签&#xff1b;小题目用h3标签&#xff1b;前两个问题使用有序列表&#xff1b;最后一个问题使用无序列表。 代码&#xff1a; <!DOCTYPE html> <html> <he…

如何编写jenkins的流水线

如何编写jenkins的流水线 我们为什么需要编写流水线&#xff1f;新建一个jenkins pipeline的item初识pipeline界面pipeline代码关于取值声明和定义工具使用数据结构 我们为什么需要编写流水线&#xff1f; 这里假如你已经安装了好了jenkins&#xff0c;并且能够正常启动它。 通…

项目管理人员的自我评估与职业目标设定

在当今快速发展的商业环境中&#xff0c;项目管理人员的职业规划至关重要。它不仅涉及到个人职业发展的方向、目标和路径选择&#xff0c;还包括如何提升自身的专业技能、管理能力和行业知识。项目管理人员需要明确自己的职业目标、制定合理的职业发展计划、不断学习新知识和技…

状态空间方程离散化(Matlab符号函数)卡尔曼

// 卡尔曼滤波(4)&#xff1a;扩展卡尔曼滤波 - 知乎 // // matlab 连续系统状态空间表达式的离散化&状态转移矩阵求解_matlab状态方程离散化-CSDN博客 // // // %https://blog.csdn.net/weixin_44051006/article/details/107007916 clear all; clc; syms R1 R2 C1 C…

ubuntu24.04播放语音视频

直接打开ubuntu自带的video播放.mp4文件&#xff0c;弹窗报错如下&#xff1a; 播放此影片需要插件 MPEG-4 AAC 编码器安装方式&#xff1a; sudo apt install gstreamer1.0-plugins-good gstreamer1.0-plugins-bad gstreamer1.0-plugins-ugly sudo apt install ffmpeg验证AA…

音视频入门基础:MPEG2-TS专题(4)——使用工具分析MPEG2-TS传输流

一、引言 有很多工具可以分析MPEG2-TS文件/流&#xff0c;比如Elecard Stream Analyzer、PROMAX TS Analyser、easyice等。下面一一对它们进行简介&#xff08;个人感觉easyice功能更强大一点&#xff09;。 二、Elecard Stream Analyzer 使用Elecard Stream Analyzer工具可以…

C++基础 抽象类 类模板 STL库 QT环境

一、抽象类 1、纯虚函数 在多态中&#xff0c;通常父类中虚函数的实现是毫无意义的&#xff0c;主要都是调用子类重写的内容&#xff0c;因此可以将虚函数改为纯虚函数。 语法&#xff1a; virtual 返回值类型 函数名 (参数列表) 0; 2. 抽象类 1) 概念 有纯虚函数所在的类…

c语言选择排序

选择排序思想&#xff1a; 反复地从未排序部分选择最小&#xff08;或最大&#xff09;的元素&#xff0c;将其放到已排序部分的末尾&#xff1b; 首先用一个变量min来保存数组第一个元素的下标&#xff0c;然后用这个下标访问这个元素&#xff0c;将这个元素与它后面的元素相…

数字后端教程之Innovus report_property和get_property使用方法及应用案例

数字IC后端实现Innovus中使用report_property可以报告出各种各样object的属性&#xff0c;主要有cell&#xff0c;net&#xff0c;PG Net&#xff0c;Pin&#xff0c;时钟clock&#xff0c;时序库lib属性&#xff0c;Design属性&#xff0c;timing path&#xff0c;timin arc等…