前端知识速记--JS篇:instanceof

embedded/2025/2/13 23:40:45/

前端知识速记–JS篇:instanceof

在JavaScript中,instanceof运算符用于检测一个对象是否是另一个对象的实例。它的基本语法为:obj instanceof Constructor。如果objConstructor的实例,它将返回true,否则返回false。这是一个判断对象的原型链上是否存在构造函数的prototype属性的简单方法。

1. instanceof的基本用法

示例

javascript">function Animal() {}
function Dog() {}Dog.prototype = Object.create(Animal.prototype);const dog = new Dog();console.log(dog instanceof Dog);       // true
console.log(dog instanceof Animal);    // true
console.log(dog instanceof Object);     // true
console.log(dog instanceof Array);      // false

在上述代码中:

  • dog instanceof Dog 返回true,因为dogDog的实例。
  • dog instanceof Animal 也返回true,因为Dog继承自Animaldog通过原型链链接到Animal
  • dog instanceof Object 返回true,因为所有对象都是Object的实例。
  • dog instanceof Array 返回false,因为dog并非Array的实例。

2. instanceoftypeof的比较

typeof的特点

typeof运算符用于获取变量的数据类型,它的语法为:typeof variable。返回的结果是一个字符串,表示变量的数据类型。它有局限性,尤其在判断null时:

javascript">console.log(typeof null);  // "object"

为什么typeof null返回"object"

这是JavaScript语言设计中的一个历史遗留问题。在最初的JavaScript版本中,所有对象的类型都被定义为对象,并且在内存中null的表示方式也是以对象的形式。因此,当typeof检查到null时,它看到了对象的表示,返回了"object"。这个行为虽然被广泛认为是一个 bug,但在后续版本中为了兼容性并未被更改。

instanceof对比

  • instanceof专注于对象的类型(即原型链),能够准确判断对象是否为某个构造函数的实例。
  • typeof适用于 primitive value 和一些非对象类型,但因为历史原因对null处理不当,使其在类型判断上显得薄弱。
javascript">const value = null;
console.log(typeof value);               // "object"
console.log(value instanceof Object);     // false

在这个例子中,虽然typeof null返回object,但是instanceof运算符却正确地反映出null并不是一个对象实例,因为它没有原型链。

3. 经典问题

经典问题:如何判断一个变量既不是null也不是数组?

使用instanceoftypeof结合的方式,可以有效判断:

javascript">function isObject(value) {return value !== null && typeof value === 'object';
}console.log(isObject([]));       // true
console.log(isObject({}));       // true
console.log(isObject(null));     // false
console.log(isObject(42));       // false

该函数定义了在判断对象之前,先排除了null的情况。


http://www.ppmy.cn/embedded/161990.html

相关文章

如何顺利开设Facebook账户并设置广告账户

随着数字营销的快速发展,Facebook成为了许多企业进行品牌推广、增加曝光和吸引潜在客户的重要平台。为了能够在Facebook上投放广告,首先需要开设一个Facebook个人账户,并进一步设置广告账户。 一、创建Facebook个人账户 1.访问Facebook官方…

Django中apps.py作用

在 Django 中,apps.py 文件用于定义应用程序的配置类(AppConfig),主要作用包括: 1. 应用程序配置 apps.py 中的 AppConfig 类用于配置应用程序的元数据和行为,例如应用程序的名称、标签等。 2. 应用程序…

微信小程序 - 分包加载

分包加载 小程序的代码通常是由许多页面、组件以及资源等组成,随着小程序功能的增加,代码量也会逐渐增加,体积过大就会导致用户打开速度变慢,影响用户的使用体验。 分包加载是一种小程序优化技术。将小程序不同功能的代码&#…

ADB的安装和使用

文章目录 前言一、ADB是什么?一、ADB的基本概念二、ADB的主要功能三、ADB在Linux系统中的安装与使用四、ADB命令的示例 二、windows 安装ADB1.ADB不用安装,解压文件后添加环境变量即可2.测试是否能使用 三、与linux通信3.1 将 usb设备连接到虚拟机3.2.测…

python动物识别深度学习分析系统

✔️该系统基于 深度学习 中的 卷积神经网络(CNN),利用 TensorFlow 或 PyTorch 框架,针对动物图像进行高效的分类和识别。通过 数据增强技术(如旋转、缩放、裁剪等)扩展数据集,提高模型的鲁棒性…

自学网络安全(黑客技术)2025年 —100天学习计划

前言 什么是网络安全 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 如何成为一名黑客 很多朋友在学习安全方面都会半路转行&#xff0c…

java项目之基于web的中国古诗词的设计与实现源码(ssm+mysql)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的基于web的中国古诗词的设计与实现。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 基于web的中国…

掌握 CSS Flexbox 布局,轻松实现复杂网页设计

系列文章目录 01-从零开始学CSS选择器:属性选择器与伪类选择器完全指南 02-避免样式冲突:掌握CSS选择器优先级与层叠规则的终极指南 03-如何精确掌控网页布局?深入解析 CSS 样式与盒模型 04-CSS 布局全面解析:从传统浮动到现代 F…