当前位置: 首页 > news >正文

【前端】深入解析 JavaScript 中的 instanceof 运算符与 number 数据类型 和 Number 对象 区别辨析


在这里插入图片描述

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳]
本文专栏: 前端

在这里插入图片描述


文章目录

  • 💯前言
  • 💯理论基础:`instanceof` 运算符的设计初衷与核心功能
    • 基础定义与应用
    • 示例解析
      • 代码分解
  • 💯`typeof` 与 `instanceof`:两种类型检测方法的语义与适用场景
    • `typeof` 运算符的适用范围与局限
    • 为什么选择 `instanceof`
      • 运算符特性对比
  • 💯复杂场景中的 `instanceof` 使用与潜在问题
    • 特殊案例:基本类型与构造对象
      • 深层次解析
    • 跨上下文对象的原型链断裂
  • 💯探究 `number` 与 `Number` 的本质差异
    • 原始类型 `number`
    • 构造函数 `Number`
    • 对比案例
      • 关键解读
    • 实践建议
  • 💯`instanceof` 的高级应用与拓展
    • 自定义类的实例验证
    • 结合 `Symbol.hasInstance` 扩展功能
  • 💯小结


在这里插入图片描述


💯前言

  • JavaScript 的深层学习与研究中,instanceof 运算符和 Number 构造函数是两个核心概念。这些概念不仅体现了 JavaScript 语言设计中的抽象思维,也直接影响了其在动态类型语言中的实际应用价值。本文将通过代码示例深入分析扩展性讨论,全方位阐释 instanceof 的底层机制、与 typeof 的语义差异,以及 numberNumber 的语法与语义上的本质区别。
    JavaScript在这里插入图片描述

💯理论基础:instanceof 运算符的设计初衷与核心功能

在这里插入图片描述


基础定义与应用

instanceof 是 JavaScript 中用于判断某个对象是否为特定构造函数的实例的运算符。它通过检查对象的原型链来验证其类型归属。
在这里插入图片描述


示例解析

以下示例展示了 instanceof 的基本用法:

var oStringObject = new String("hello world");
console.log(oStringObject instanceof String); // 输出 true

在这里插入图片描述


代码分解

  1. new String("hello world") 创建了一个基于 String 构造函数的对象。
  2. instanceof 运算符验证 oStringObject 是否属于 String 类型。
  3. 原型链检测的结果返回 true,表明 oStringObject 确实是 String 的实例。
    在这里插入图片描述

💯typeofinstanceof:两种类型检测方法的语义与适用场景

在这里插入图片描述


typeof 运算符的适用范围与局限

typeof 是 JavaScript 中用于检测变量类型的运算符。尽管在处理原始值时功能高效,但在区分复杂引用类型时显得力不从心。
例如:

var oStringObject = new String("hello world");
console.log(typeof oStringObject); // 输出 "object"

在这里插入图片描述

此时,typeof 无法进一步细化类型,始终将引用类型归类为 "object"


为什么选择 instanceof

instanceof 运算符通过深入检查原型链,弥补了 typeof 的不足,能够明确区分复杂引用类型的归属关系。
在这里插入图片描述


运算符特性对比

在这里插入图片描述

特性typeofinstanceof
检测范围原始类型与有限的对象类型任意引用类型
返回值数据类型字符串布尔值
局限性难以区分引用类型依赖构造函数定义

💯复杂场景中的 instanceof 使用与潜在问题

在这里插入图片描述


特殊案例:基本类型与构造对象

考虑以下代码:

console.log(1 instanceof Number); // 输出 false

在这里插入图片描述


深层次解析

  1. 数字 1 是 JavaScript 中的原始值(primitive value),本质上没有原型链。
  2. 因此,instanceof 在原始值上无法匹配 Number.prototype,导致返回 false

通过 Number 构造函数创建对象可改变此行为:

var num = new Number(1);
console.log(num instanceof Number); // 输出 true

在这里插入图片描述

此时,num 是一个引用类型,其原型链与 Number 构造函数相关联。


跨上下文对象的原型链断裂

在这里插入图片描述
当对象跨 iframe 或不同的 JavaScript 上下文传递时,其原型链可能会发生偏移,导致 instanceof 判断失效。解决此类问题的典型方法包括:

  • 使用 Object.prototype.toString.call 确定具体类型。
  • 利用 Symbol.toStringTag 自定义类型标签。

💯探究 numberNumber 的本质差异

在这里插入图片描述
JavaScript 中,numberNumber 是两个相关但语义截然不同的概念。它们分别代表了原始值和引用类型的范畴。


原始类型 number

  • 定义number 是一种轻量化、不可变的基本数据类型,用于表示数值,包括整数、浮点数、NaNInfinity
  • 特性
    • 不附带方法或属性。
    • 高效、适合常规运算。
    • 可通过 typeof 精确检测:
      console.log(typeof 1); // "number"
      console.log(typeof NaN); // "number"
      
      在这里插入图片描述

构造函数 Number

  • 定义Number 是一个内置构造函数,用于创建数字对象(引用类型)。
  • 特性
    • 支持多种方法和属性,例如 toFixedtoString 等。
    • 通过 typeof 检测为 "object"
      var numObj = new Number(1);
      console.log(typeof numObj); // "object"
      
      在这里插入图片描述

对比案例

以下代码展示了二者的行为差异:

var num1 = 1;
var num2 = new Number(1);console.log(typeof num1); // "number"
console.log(typeof num2); // "object"console.log(num1 == num2);  // true
console.log(num1 === num2); // false

在这里插入图片描述


关键解读

在这里插入图片描述

  1. num1 是不可变的基本类型。
  2. num2 是可扩展的引用类型对象。
  3. 宽松比较 (==) 允许类型转换,因此 num1num2 值相等。
  4. 严格比较 (===) 同时考虑类型,导致结果不同。

实践建议

在这里插入图片描述

  • 在常规开发中,应优先选择原始类型 number
  • 避免滥用 Number 对象,除非特定场景需要其引用特性。

💯instanceof 的高级应用与拓展

在这里插入图片描述


自定义类的实例验证

在面向对象编程中,instanceof 是验证继承关系的关键工具:

class Animal {}
class Dog extends Animal {}const myDog = new Dog();
console.log(myDog instanceof Dog); // true
console.log(myDog instanceof Animal); // true

在这里插入图片描述

上述代码表明,myDog 同时继承了 DogAnimal 的特性。


结合 Symbol.hasInstance 扩展功能

instanceof 的行为可以通过 Symbol.hasInstance 重定义:

class Custom {static [Symbol.hasInstance](instance) {return typeof instance === "string";}
}console.log("hello" instanceof Custom); // true
console.log(123 instanceof Custom);    // false

在这里插入图片描述

此方法为类型判断提供了更大的灵活性,特别适用于多态场景。


💯小结

  • 在这里插入图片描述
    通过本次深入分析,我们探讨了 JavaScript 中 instanceofNumber 的语义、行为及其应用场景:

  • instanceof 是一个强大且灵活的工具,但需注意其对基本类型的局限性。

  • numberNumber 的语义差异,提醒开发者在语法简洁性与性能优化之间平衡选择。

  • 高级场景下,instanceof 的扩展性进一步彰显了 JavaScript 动态语言的独特优势。


在这里插入图片描述


相关文章:

【前端】深入解析 JavaScript 中的 instanceof 运算符与 number 数据类型 和 Number 对象 区别辨析

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 💯前言💯理论基础:instanceof 运算符的设计初衷与核心功能基础定义与应用示例解析代码分解 💯typeof 与 instanceof:两种类型检测方法的语义与…...

为什么类 UNIX 操作系统通常内置编译器?为什么 Windows 更倾向于直接使用二进制文件?

操作系统是否内置编译器,取决于该系统的设计目标、用户群体以及常见的使用场景。以下是内置编译器和直接使用二进制的设计理念和原因的分析: 为什么类 UNIX 操作系统通常内置编译器? 面向开发者的需求: 类 UNIX 系统(如…...

Ubuntu安装grafana

需求背景:管理服务器,并在线预警,通知 需求目的: 及时获取服务器状态 技能要求: 1、ubuntu 2、grafana 3、prometheus 4、node 步骤: 一、grafana安装 1、准备系统环境,配置号网络 2、…...

Java阶段三06

第3章-第6节 一、知识点 理解MVC三层模型、理解什么是SpringMVC、理解SpringMVC的工作流程、了解springMVC和Struts2的区别、学会使用SpringMVC封装不同请求、接收参数 二、目标 理解MVC三层模型 理解什么是SpringMVC 理解SpringMVC的工作流程 学会使用SpringMVC封装请求…...

C# .NET CORE 开发问题汇总

1. error MSB4803: .NET Core 版本的 MSBuild 不支持“ResolveComReference”。请使用 .NET Framework 版本的 MSBuild。 引用了一个COM组件, 使用donet 命令时,提示不支持, 可以先将项目设置为x86以构建, 将COM引用添加到核心项目中,构建它,在obj\x86\…...

短视频矩阵搭建/源码部署揭秘

短视频矩阵源码开发部署涉及使用开源技术构建和配置短视频平台。这一过程涵盖了从前端界面设计到后端逻辑处理,再到视频内容的存储管理的多个方面。以下是对关键技术的详细分析: 前端技术:为了提供流畅且互动性强的用户界面,短视…...

SpringBoot配置文件

文章目录 基本语法数据类型写法举例行内写法级联写法 配置提示用法举例逗号分隔默认值单个值集合值 映射到类 注意事项引用 基本语法 key: value形式,kv之间有空格大小写敏感使用缩进表示层级关系,缩进不允许使用tab,只允许空格。缩进的空格…...

[漏洞挖掘与防护] 05.CVE-2018-12613:phpMyAdmin 4.8.1后台文件包含缺陷复现及防御措施

这是作者新开的一个专栏——“漏洞挖掘与防护”,前期会复现各种经典和最新漏洞,并总结防护技巧;后期尝试从零学习漏洞挖掘技术,包括Web漏洞和二进制及IOT相关漏洞,以及Fuzzing技术。新的征程,新的开启,漫漫长征路,偏向虎山行。享受过程,感谢您的陪伴,一起加油~ 欢迎关…...

第四十七篇 Vision Transformer(VIT)模型解析

ViT(Vision Transformer)模型是一种基于Transformer架构的视觉模型,它成功地将Transformer从自然语言处理(NLP)领域引入到计算机视觉(CV)领域,专门用于处理图像数据。以下是对ViT模型…...

Redis篇-4--原理篇3--Redis发布/订阅(Pub/Sub)

1、概述 Redis 发布/订阅(Publish/Subscribe,简称 Pub/Sub)是一种消息传递模式,允许客户端订阅一个或多个通道(channel),并接收其他客户端发布到这些通道的消息。 2、Redis 发布/订阅的主要概…...

Spring Boot 3 中Bean的配置和实例化详解

一、引言 在Java企业级开发领域,Spring Boot凭借其简洁、快速、高效的特点,迅速成为了众多开发者的首选框架。Spring Boot通过自动配置、起步依赖等特性,极大地简化了Spring应用的搭建和开发过程。而在Spring Boot的众多核心特性中&#xff…...

一文理解 “Bootstrap“ 在统计学背景下的含义

🍉 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 一文理解 “Bootstrap“ 在统计学背景下的含义 类比:重新抽样 假设我参加了班级的考试,每位同学都获得了一个成绩。现在,我想了解整个班级的平均成绩,但…...

多媒体文件解复用(Demuxing)过程

多媒体文件的解复用(Demuxing)过程指的是从一个多媒体容器文件(如 MP4、MKV、AVI 等)中提取不同类型的多媒体数据流(例如视频流、音频流、字幕流等)的过程。 容器文件本身并不包含实际的视频或音频数据&…...

ARINC 标准全解析:航空电子领域多系列标准的核心内容、应用与重要意义

ARINC标准概述 ARINC标准是航空电子领域一系列重要的标准规范,由航空电子工程委员会(AEEC)编制,众多航空公司等参与支持。这些标准涵盖了从飞机设备安装、数据传输到航空电子设备功能等众多方面,确保航空电子系统的兼…...

开源架构安全深度解析:挑战、措施与未来

开源架构安全深度解析:挑战、措施与未来 一、引言二、开源架构面临的安全挑战(一)代码漏洞 —— 隐藏的定时炸弹(二)依赖项安全 —— 牵一发而动全身(三)社区安全 —— 开放中的潜在危机 三、开…...

Python装饰器设计模式:为函数增添风味

Python装饰器设计模式:为函数增添风味 什么是装饰器?为什么需要装饰器?如何使用装饰器?示例1:简单的装饰器示例2:带参数的装饰器 装饰器的使用场景总结 大家好,今天我们要学习一个非常有趣的Pyt…...

Vue.js的生命周期

Vue.js 是一个构建用户界面的渐进式框架,它提供了一个响应式和组件化的方式来构建前端应用。了解 Vue 的生命周期对于开发者来说至关重要,因为它可以帮助我们更好地控制组件的状态和行为。本文将详细介绍 Vue 的生命周期,并提供相应的代码示例…...

【数据库】关系代数和SQL语句

一 对于教学数据库的三个基本表 学生S(S#,SNAME,AGE,SEX) 学习SC(S#,C#,GRADE) 课程(C#,CNAME,TEACHER) (1)试用关系代数表达式和SQL语句表示:检索WANG同学不学的课程号 select C# from C where C# not in(select C# from SCwhere S# in…...

Pytest测试用例使用小结

基础使用 Pytest 测试用例实现代码 import pytest from server.service import Servicepytest.fixture def service():return Service(logger)class TestService:classmethoddef setup_class(cls):"""初始化设置一次:return:"""logger.info(&q…...

KV Shifting Attention Enhances Language Modeling

基本信息 📝 原文链接: https://arxiv.org/abs/2411.19574👥 作者: Mingyu Xu, Wei Cheng, Bingning Wang, Weipeng Chen🏷️ 关键词: KV shifting attention, induction heads, language modeling📚 分类: 机器学习, 自然语言处…...

从 Zuul 迁移到 Spring Cloud Gateway:一步步实现服务网关的升级

从 Zuul 迁移到 Spring Cloud Gateway:一步步实现服务网关的升级 迁移前的准备工作迁移步骤详解第一步:查看源码第二步:启动类迁移第三步:引入 Gateway 依赖第四步 编写bootstrap.yaml第五步:替换路由配置第六步&#…...

推荐几款国外AI音频工具

【加拿大】Resemble AI - 提供AI驱动的语音合成 【加拿大】Resemble AI - 提供AI驱动的语音合成和克隆工具 Resemble,AI提供AI驱动的语音合成和克隆工具,帮助用户高效生成和处理语音内容,其语音合成功能可以自动生成自然流畅的语音,提升音频项目的表现力,Resemble,AI的语音克…...

导入excel动态生成海报

需求:给出一份excel表格(1000条数据),要将表格中的字段数据渲染到一张背景图片上,然后再下载图片,貌似浏览器做了限制,当连续下载10张图片后就不在下载了,然后用异步操作解决了这个问题。 // e…...

Unity 使用LineRenderer制作模拟2d绳子

效果展示: 实现如下: 首先,直接上代码: using System.Collections; using System.Collections.Generic; using UnityEngine;public class LineFourRender : MonoBehaviour {public Transform StartNode;public Transform MidNod…...

Android启动优化指南

文章目录 前言一、启动分类与优化目标1、冷启动1.1 优化思路1.2 延迟初始化与按需加载1.3 并行加载与异步执行1.4 资源优化与懒加载1.5 内存优化与垃圾回收控制 2. 温启动2.1 优化应用的生命周期管理2.2 数据缓存与懒加载2.3 延迟渲染与视图优化 3. 热启动3.1 保持应用的状态3.…...

每日一练 | 华为 eSight 创建的缺省角色

01 真题题目 下列选项中,不属于华为 eSight 创建的缺省角色的是: A. Administrator B. Monitor C. Operator D. End-User 02 真题答案 D 03 答案解析 华为 eSight 是一款综合性的网络管理平台,提供了多种管理和监控功能。 为了确保不同用…...

ubuntu 手动更换库文件解决nvcc -V和nvidia-smi不一致

NVML 库版本与驱动不匹配 问题现象问题排查限制解决禁止自动更新降低库版本 问题现象 笔主在训练之前想查看gpu占用情况,使用watch -n 1 nvidia-smi发现: 且在推理、训练时无法使用到显卡。 问题排查 cat /proc/driver/nvidia/version查看当前显卡驱…...

DataSophon集成CMAK KafkaManager

本次集成基于DDP1.2.1 集成CMAK-3.0.0.6 设计的json和tar包我放网盘了. 通过网盘分享的文件:DDP集成CMAK 链接: https://pan.baidu.com/s/1BR70Ajj9FxvjBlsOX4Ivhw?pwdcpmc 提取码: cpmc CMAK github上提供了zip压缩包.将压缩包解压之后 在根目录下加入启动脚本…...

2024-2025关于华为ICT大赛考试平台常见问题

一、考生考试流程 第一步:收到正式考试链接后点击考试链接并登录; 第二步:请仔细阅读诚信考试公约,阅读完成后勾选“我已阅读”,并点击确定; 第三步:上传身份证人像面进行考前校验&#xff0…...

Halcon中lines_gauss(Operator)算子原理及应用详解

在Halcon图像处理库中,lines_gauss算子是一个用于检测图像中线条的强大工具,它能够提供亚像素精度的线条轮廓。以下是对lines_gauss (ImageReducedTracks, Lines, 1.5, 1, 8, ‘light’, ‘true’, ‘bar-shaped’, ‘true’)算子的详细解释:…...

Flink集群搭建整合Yarn运行

Flink 集群 1. 服务器规划 服务器h1、h4、h5 2. StandAlone 模式(不推荐) 2.1 会话模式 在h1操作 #1、解压 tar -zxvf flink-1.19.1-bin-scala_2.12.tgz -C /app/#2、修改配置文件 cd /app/flink-1.19.1/conf vim conf.yaml ##内容:## j…...

FPGA工作原理、架构及底层资源

FPGA工作原理、架构及底层资源 文章目录 FPGA工作原理、架构及底层资源前言一、FPGA工作原理二、FPGA架构及底层资源 1.FPGA架构2.FPGA底层资源 2.1可编程输入/输出单元简称(IOB)2.2可配置逻辑块2.3丰富的布线资源2.4数字时钟管理模块(DCM)2.5嵌入式块 …...

Postman的使用

(一)创建Collections:Collections->New Collection->创建界面填入Collection名称,比如某个系统/模块名,描述里可以稍微更详细的介绍集合的信息 Collection创建时,还可以定义Authorization 如下&#…...

【报错】新建springboot项目时缺少resource

1.问题描述 在新建springboot项目时缺少resources,刚刚新建时的目录刚好就是去掉涂鸦的resources后的目录 2.解决方法 步骤如下:【文件】--【项目结构】--【模块】--【源】--在main文件夹右击选择新建文件夹并命名为resources--在test文件夹右击选择新建文件夹并命名…...

phpstudy访问本地localhost无目录解决办法

phpstudy访问本地localhost无目录解决办法 错误: 直接访问本地http://localhost/,出现hello word,或者直接报错,无法出现本地目录 解决办法: 对于Phpstudy-2018版本来说: 找到这里的Phpstudy设置 2. 打…...

架构16-向微服务迈进

零、文章目录 架构16-向微服务迈进 1、向微服务迈进 (1)软件开发中的“银弹”概念 **背景:**软件开发过程中常常出现工期延误、预算超支、产品质量低劣等问题,这使得管理者、程序员和用户都渴望找到一种能够显著降低成本的“银…...

基于Springboot汽车资讯网站【附源码】

基于Springboot汽车资讯网站 效果如下: 系统主页面 汽车信息页面 系统登陆页面 汽车信息推荐页面 经销商页面 留言反馈页面 用户管理页面 汽车信息页面 研究背景 随着信息技术的快速发展和互联网的普及,互联网已成为人们查找信息的重要场所。汽车资讯…...

Tomcat项目本地部署

今天分享一下如何在本地,不依赖于idea部署聚合项目,以我做过的哈米音乐项目为例,项目结构如下: ham-core模块为公共模块,我们只需将另外三个模块:前台、后台、文件服务器打包,将打好的jar、war包…...

【OpenCV】直方图

理论 可以将直方图视为图形或曲线图,从而使您对图像的强度分布有一个整体的了解。它是在X轴上具有像素值(不总是从0到255的范围),在Y轴上具有图像中相应像素数的图。 这只是理解图像的另一种方式。通过查看图像的直方图,您可以直观地了解该…...

pika:适用于大数据量持久化的类redis组件|jedis集成pika(二)

文章目录 0. 引言1. pika客户端支持2. jedis集成pika3. pika性能测试 0. 引言 上节我们讲解了pika的搭建,这节我们来看下如何在java项目中利用jedis集成pika 1. pika客户端支持 pika支持的客户端与redis完全一致,所以理论上redis支持的客户端pika也都…...

Linux 进程间通信

Linux进程间通信 进程间通信(IPC,Inter-Process Communication)在 Linux 下常用的方法包括: 1)管道(Pipe) 2)有名管道(FIFO) 3)消息队列&#x…...

【C++】快速排序详解与优化

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯快速排序的核心思想1. 算法原理2. 算法复杂度分析时间复杂度空间复杂度 💯快速排序的代码实现与解析代码实现代码解析1. 递归终止条件2. 动态分配子数组3. 分区…...

【JAVA高级篇教学】第二篇:使用 Redisson 实现高效限流机制

在高并发系统中,限流是一项非常重要的技术手段,用于保护后端服务,防止因流量过大导致系统崩溃。本文将详细介绍如何使用 Redisson 提供的 RRateLimiter 实现分布式限流,以及其原理、使用场景和完整代码示例。 目录 一、什么是限流…...

NanoLog起步笔记-1

nonolog起步笔记-1 背景与上下文写在前面Nanolog与一般的实时log的异同现代log的一般特性Nanolog的选择 背景与上下文 因为工作中用到了NanoLog。有必要研究一下。 前段时间研究了许多内容,以为写了比较详实的笔记,今天找了找,不仅笔记没找到…...

vs打开unity项目 新建文件后无法自动补全

问题 第一次双击c#文件自动打开vs编辑器的时候能自动补全,再一次在unity中新建c#文件后双击打开发现vs不能自动补全了。每次都要重新打开vs编辑器才能自动补全,导致效率很低,后面发现是没有安装扩展,注意扩展和工具的区别。 解决…...

HDFS的Federation机制的实现原理和Erasure Coding节省存储空间的原理

目录 Federation机制的实现原理1.HDFS的分层图解(1)NameSpace(2)Block Storage1)Block Management2)Storage 2.Federation机制的优点3.Federation机制的缺点4.Federation机制的实现(1&#xff0…...

经验笔记:使用 PyTorch 计算多分类问题中Dice Loss 的正确方法

经验笔记:使用 PyTorch 计算多分类问题中Dice Loss 的正确方法 概述 Dice Loss 是一种广泛应用于图像分割任务中的损失函数,它基于 Dice 系数(也称为 F1-score),用于衡量预测结果与真实标签之间的相似度。在 PyTorch…...

如何在 Ubuntu 22.04 上安装 PostgreSQL

简介 PostgreSQL(或简称Postgres)是一个关系型数据库管理系统,它提供了SQL查询语言的实现。它符合标准,并且拥有许多高级特性,比如可靠的事务处理和无需读锁的并发控制。 本指南将展示如何在Ubuntu 22.04服务器上快速…...

正则表达式的高级方法

正则表达式的高级方法 正则表达式(regex)不仅仅是简单的模式匹配工具,它还提供了一系列高级功能,使得处理复杂文本任务变得更加灵活和强大。以下是一些Python中正则表达式的高级用法: 1. 命名捕获组 命名捕获组允许…...

axios的get和post请求,关于携带参数相关的讲解一下

在使用 Axios 发送 HTTP 请求时,GET 和 POST 请求携带参数的方式有所不同。以下是关于这两种请求方法携带参数的详细讲解: GET 请求携带参数 对于 GET 请求,参数通常附加在 URL 之后,以查询字符串的形式传递。 直接在 URL 中拼接…...