JavaScript instanceof如何工作_它检查什么?

instanceof 检查对象原型链是否包含构造函数的 prototype 对象,基于引用相等向上查找 [[Prototype]],不依赖 constructor 属性;原始值返回 false,null 无原型链,undefined 右侧非函数则报错;可由 Symbol.hasInstance 自定义行为。

javascript instanceof如何工作_它检查什么?

instanceof 检查的是对象的原型链上是否包含构造函数的 prototype 对象。

它不检查构造函数本身,也不检查对象的 constructor 属性

很多人误以为 instanceof 是看 obj.constructor === Ctor,其实不是。constructor 可以被随意修改,完全不可靠。instanceof 的判断依据只有一条:沿着 obj 的 __proto__(即内部 [[Prototype]])一路向上查找,看能不能找到 Ctor.prototype 这个对象。

如果找到了,返回 true 如果查到原型链尽头(null)都没找到,返回 false 要求右边必须是函数(否则抛错),左边可以是任意值(非对象会直接返回 false)

原型链查找是基于引用相等,不是值相等

instanceof 不关心 Ctor.prototype 上有什么属性或方法,只关心“是不是同一个对象”。哪怕两个函数有完全一样的 prototype 内容,只要不是同一个对象实例,就不会匹配。

例如:

立即学习“Java免费学习笔记(深入)”;

function A() {}function B() {}B.prototype = Object.create(A.prototype); // 继承 Aconst b = new B();console.log(b instanceof A); // true —— 因为 B.prototype.__proto__ === A.prototypeconsole.log(b instanceof B); // true —— 因为 b.__proto__ === B.prototype

注意 null、undefined 和原始值的行为

原始值(如字符串、数字、布尔)用 instanceof 总是返回 false,因为它们不是对象,没有原型链:

"hello" instanceof Stringfalse new String("hello") instanceof Stringtrue null instanceof Objectfalse(null 没有原型链) undefined instanceof Object → 报错(右侧必须是函数)

ES6 之后可自定义 Symbol.hasInstance

如果构造函数上定义了静态方法 [Symbol.hasInstance](obj),instanceof 就会调用它,而不是走默认原型链查找。这是少数能覆盖默认行为的方式。

class MyArray {  static [Symbol.hasInstance](obj) {    return Array.isArray(obj) || (obj && typeof obj.length === 'number');  }}console.log([1,2] instanceof MyArray); // trueconsole.log({length: 5} instanceof MyArray); // true

基本上就这些。instanceof 的核心就是原型链上的引用查找,简单但容易忽略细节。

以上就是JavaScript instanceof如何工作_它检查什么?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1542290.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 14:04:16
下一篇 2025年12月21日 14:04:29

相关推荐

  • javascript柯里化是什么_如何实现一个柯里化函数?

    柯里化是将多参数函数转换为一系列单参数函数的过程,核心是参数分步传入并按fn.length判断是否执行原函数。 柯里化(Currying)是把一个接收多个参数的函数,转换成一系列只接收一个参数的函数的过程。每次调用返回一个新的函数,直到传入所有参数后才真正执行原函数。 柯里化的本质是“参数分步传入”…

    2025年12月21日
    000
  • 利用CSS伪元素实现外边距点击事件的精确目标捕获

    本文探讨了在web开发中,当点击元素外边距时,`e.target`事件对象可能返回父元素而非目标元素的问题。针对这一常见挑战,文章提出了一种巧妙的解决方案:通过为目标元素添加一个具有负`inset`值的`::before`伪元素,并结合`position: absolute`和`z-index`属性…

    2025年12月21日
    000
  • 如何用JavaScript实现数组去重_有哪些高效的方法可以选择?

    JavaScript数组去重首选Set(基本类型),对象数组按字段去重推荐Map;filter+indexOf兼容老浏览器但性能差;reduce+Map支持任意键类型且健壮。 JavaScript数组去重有多种方法,效率和兼容性各不相同。现代项目推荐用 Set,简洁且性能好;老环境可选双循环或哈希表…

    2025年12月21日
    000
  • React中使用map渲染动态背景图片教程

    本教程旨在解决React中利用`map`函数为多个组件动态设置背景图片时遇到的常见问题。文章将深入解释`map`函数在React渲染中的正确用法,纠正将所有图片路径合并为单个字符串并应用于一个元素的错误,并提供详细的示例代码和最佳实践,确保每个数据项都能正确渲染其对应的背景图片,从而实现轮播图等效果…

    2025年12月21日
    000
  • 如何实现实时应用_javascript中socket.io怎么用?

    实现实时应用的核心是建立客户端与服务器间的双向低延迟通信,Socket.IO通过自动降级、事件驱动、命名空间和房间机制简化开发。服务端用Node.js搭建,客户端通过CDN引入并连接,需注意CORS、事件名一致性及生产环境代理配置。 实现实时应用,核心是建立客户端和服务器之间的双向、低延迟通信。So…

    2025年12月21日
    000
  • 如何用Javascript操作本地存储?

    JavaScript本地存储使用localStorage和sessionStorage,以字符串键值对形式保存数据,需用JSON.stringify()存对象、JSON.parse()取对象,并注意null处理、同源限制及容量上限。 JavaScript 操作本地存储主要靠 localStorage…

    2025年12月21日
    000
  • 如何实现响应式设计_javascript中如何检测屏幕变化?

    响应式设计中JavaScript可通过resize事件、matchMedia和orientationchange事件感知屏幕变化,需节流resize以防性能问题,优先使用window.innerWidth等视口尺寸而非screen.width。 响应式设计不只靠 CSS 媒体查询,JavaScrip…

    2025年12月21日
    000
  • D3.js 动态数据工具提示实现指南:解决事件处理函数中的数据绑定问题

    本文详细阐述了在 d3.%ignore_a_1% 中实现鼠标悬停动态数据工具提示的方法。重点解决了在 mouseover 事件处理函数中访问绑定数据时常见的错误,特别是 d3.js v6+ 版本中事件回调函数签名从 (d) 变为 (event, d) 的变化。通过提供完整的代码示例,读者将学会如何正…

    2025年12月21日
    000
  • 什么是Javascript的异步函数与await?

    async/await 是基于 Promise 的语法糖,使异步代码更易读、错误处理更直观;async 函数必返回 Promise,await 只能在 async 函数内使用,用于等待 Promise 完成并自动解包,需用 try/catch 捕获异常。 JavaScript 的异步函数(async…

    2025年12月21日
    000
  • javascript的shadow dom是什么_它如何封装样式?

    Shadow DOM 是浏览器原生的 DOM 封装机制,通过 attachShadow 创建独立子树实现样式局部化与 DOM 隔离;支持天然隔离、::slotted() 穿透和 :host 控制,继承属性与全局样式仍可透入,open 模式下 JS 可访问但样式封装由浏览器保障。 Shadow DOM…

    2025年12月21日
    000
  • javascript的内存泄漏是什么_怎样避免和排查?

    JavaScript内存泄漏指本该回收的内存未释放,导致内存持续增长甚至崩溃;常见原因包括全局变量意外挂载、未清理事件监听器、定时器未清除、闭包过度捕获及缓存无上限;预防需遵循“谁创建谁清理”,排查依赖Chrome Memory面板堆快照与引用链分析。 JavaScript 的内存泄漏是指本该被回收…

    2025年12月21日
    000
  • JavaScript性能分析_javascript瓶颈查找

    性能瓶颈可通过Chrome DevTools定位,使用Performance面板分析主线程长任务与函数调用栈,结合Memory和Coverage工具检测内存泄漏与未使用代码,优化DOM操作、事件节流及算法复杂度,并借助performance API精确测量执行时间。 JavaScript性能问题常出…

    2025年12月21日
    000
  • 解决HTML5 Canvas多图绘制覆盖问题:保持分辨率的最佳实践

    在html5 canvas上绘制多张图片时,由于每次设置`canvas.width`或`canvas.height`都会清除画布内容,导致后续图片覆盖之前绘制的图片。本文将深入探讨这一常见问题,并提供两种高效解决方案:通过单次初始化canvas尺寸,或等待所有图片加载完毕后统一绘制,确保多张图片以其…

    2025年12月21日 好文分享
    000
  • Javascript如何进行深拷贝与浅拷贝?

    浅拷贝只复制第一层属性,新旧对象共享嵌套引用;深拷贝递归复制所有层级,完全独立。常用浅拷贝有展开运算符、Object.assign()、slice()/concat();深拷贝推荐structuredClone,其次JSON法,特殊需求可手写递归函数。 JavaScript中浅拷贝只复制对象的第一层…

    2025年12月21日
    000
  • javascript中的函数是什么_如何定义和调用?

    JavaScript函数是可复用代码块,具有一等公民特性;定义方式有函数声明(提升)、函数表达式(不提升)和箭头函数(无this、不可构造);调用需用()传参,支持IIFE、默认参数与剩余参数。 JavaScript 中的函数是一段可重复使用的代码块,用来执行特定任务或计算并返回结果。它既是行为的封…

    2025年12月21日
    000
  • 在客户端脚本中正确初始化和使用 @replit/database

    本文旨在解决在浏览器环境(客户端脚本)中直接使用 `@replit/database` 导致 `ReferenceError: database is not defined` 的问题。我们将深入探讨 `@replit/database` 的运行环境,阐明其作为 Node.js 模块的特性,并提供一…

    2025年12月21日
    000
  • Mongoose聚合管道中实现字符串匹配与筛选的教程

    本教程详细讲解如何在mongoose聚合管道中高效地实现字符串匹配与筛选功能。通过结合$group、$match聚合阶段和$regex查询操作符,我们可以在服务器端对聚合后的数据进行灵活、大小写不敏感的搜索,从而优化应用性能并减少客户端处理负担。 引言 在开发数据驱动的应用程序时,搜索和过滤功能是不…

    2025年12月21日
    000
  • 什么是javascript数组_如何遍历数组元素?

    JavaScript数组是存储多个值的有序集合,用方括号创建(如[“苹果”,”香蕉”]),通过索引访问修改元素,常用for、for…of及map/filter/reduce遍历,避免for…in和遍历时修改数组。 JavaScr…

    2025年12月21日
    000
  • JavaScript生成器是什么_yield关键字怎么用?

    JavaScript生成器是用function定义的特殊函数,返回迭代器对象;yield暂停执行并返回值,next()恢复并可传入参数;yield委托其他可迭代对象,支持按需计算与异步流程控制。 JavaScript生成器是一种特殊函数,能暂停和恢复执行,适合处理异步操作、大数据流或需要按需计算的场…

    2025年12月21日
    000
  • 如何实现动画效果_javascript控制CSS动画的方法是什么?

    JavaScript控制CSS动画的核心是通过class切换触发动画并监听animationend事件,辅以style动态调整和play-state暂停/恢复,实现高效协作。 JavaScript 控制 CSS 动画,核心是通过操作元素的 class 或 style 属性来触发动画,再配合事件监听或…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信