如何判断对象自身属性?
在JavaScript中,判断一个对象的属性是否来源于原型链而非自身,是理解其继承机制的关键。本文深入探讨了多种实现方法,包括利用`hasOwnProperty()`和`in`操作符的巧妙结合,以及通过`Object.getPrototypeOf()`递归遍历原型链来精确定位属性来源。特别强调了使用`Object.hasOwn()`替代`hasOwnProperty()`以避免潜在风险,并讨论了Symbol类型属性的判断方法。此外,还分析了性能考量,在高频检测场景下推荐缓存`hasOwnProperty()`或使用`Object.hasOwn()`以提升安全性。掌握这些方法,能更有效地进行JavaScript对象属性的来源判断,并应用于各种原型链属性检测场景。
判断JavaScript对象的属性是否通过原型链访问的核心方法是:1. 使用 Object.hasOwn(obj, prop) 返回 false 且 prop in obj 返回 true,则属性来自原型链;2. 可通过 Object.getPrototypeOf 递归遍历原型链以定位属性所在原型层级;3. 对于 Symbol 属性,同样适用上述方法,但需确保使用正确的 Symbol 引用;4. 推荐使用 Object.hasOwn 替代 hasOwnProperty 以避免对象自身方法被覆盖导致的错误;5. 性能上两者差异可忽略,但高频检测时可缓存 hasOwnProperty 或使用 Object.hasOwn 提升安全性。该方案完整覆盖属性来源判断、Symbol处理、安全性与性能优化,适用于各类原型链属性检测场景。
判断JavaScript对象的属性是否可以通过原型链访问,核心在于检查该属性是否存在于对象自身,而不是其原型链上。简单来说,如果 obj.hasOwnProperty(prop)
返回 false
,且 prop in obj
返回 true
,那么该属性就是通过原型链访问的。

解决方案
要判断一个属性是否是通过原型链访问的,可以使用以下方法:

使用
hasOwnProperty
和in
操作符:hasOwnProperty
方法用于检查对象自身是否具有指定的属性(不包括继承的属性)。in
操作符则检查对象及其原型链上是否存在指定的属性。function isPropertyFromPrototype(obj, prop) { return !obj.hasOwnProperty(prop) && (prop in obj); } // 示例 function MyObject() {} MyObject.prototype.protoProp = 'protoValue'; let obj = new MyObject(); obj.ownProp = 'ownValue'; console.log(isPropertyFromPrototype(obj, 'protoProp')); // true console.log(isPropertyFromPrototype(obj, 'ownProp')); // false console.log(isPropertyFromPrototype(obj, 'nonExistent')); // false
这种方法直接明了,易于理解。但是,它依赖于
hasOwnProperty
和in
操作符的行为,需要确保正确使用。使用
Object.getPrototypeOf
和hasOwnProperty
递归检查原型链:这种方法稍微复杂一些,但更具灵活性,可以追踪属性来自原型链的哪个层级。
function findPropertyInPrototypeChain(obj, prop) { let current = obj; while (current) { if (current.hasOwnProperty(prop)) { // 找到属性,但需要判断是否是 obj 自身 if (current === obj) { return null; // 属性在对象自身上 } else { return current; // 属性在原型链的某个位置 } } current = Object.getPrototypeOf(current); } return null; // 属性不存在于原型链上 } // 示例 function MyObject() {} MyObject.prototype.protoProp = 'protoValue'; function AnotherObject() {} AnotherObject.prototype = new MyObject(); AnotherObject.prototype.anotherProtoProp = 'anotherProtoValue'; let obj = new AnotherObject(); obj.ownProp = 'ownValue'; console.log(findPropertyInPrototypeChain(obj, 'protoProp')); // MyObject.prototype console.log(findPropertyInPrototypeChain(obj, 'anotherProtoProp')); // AnotherObject.prototype console.log(findPropertyInPrototypeChain(obj, 'ownProp')); // null console.log(findPropertyInPrototypeChain(obj, 'nonExistent')); // null
这种方法允许你不仅判断属性是否来自原型链,还可以确定它来自哪个原型对象。这在调试和理解复杂的原型链结构时非常有用。
为什么 Object.hasOwn
比 hasOwnProperty
更推荐?
Object.hasOwn(obj, prop)
是一个相对较新的方法,用于替代 obj.hasOwnProperty(prop)
。主要区别在于,Object.hasOwn
可以避免一些潜在的问题,特别是当对象自身可能覆盖了 hasOwnProperty
方法时。
let obj = { hasOwnProperty: null // 故意覆盖 hasOwnProperty }; // obj.hasOwnProperty('prop'); // TypeError: Cannot read properties of null (reading 'call') Object.hasOwn(obj, 'prop'); // 安全地返回 false
使用 Object.hasOwn
可以更安全地检查属性,因为它不依赖于对象自身的 hasOwnProperty
方法的实现。
如果属性是 Symbol 类型,如何判断?
如果属性是 Symbol 类型,上述方法仍然适用。hasOwnProperty
和 in
操作符都可以处理 Symbol 类型的属性。
const mySymbol = Symbol('mySymbol'); function MyObject() { this[mySymbol] = 'symbolValue'; } MyObject.prototype.protoSymbol = Symbol('protoSymbol'); let obj = new MyObject(); console.log(Object.hasOwn(obj, mySymbol)); // true console.log(mySymbol in obj); // true console.log(Object.hasOwn(obj, 'protoSymbol')); // false console.log('protoSymbol' in obj); // false (因为 'protoSymbol' 不是一个 Symbol) console.log(MyObject.prototype.protoSymbol in obj); // false console.log(obj.protoSymbol === undefined) // true const isSymbolFromPrototype = !Object.hasOwn(obj, MyObject.prototype.protoSymbol) && (MyObject.prototype.protoSymbol in obj) console.log(isSymbolFromPrototype) // false (因为 obj 没有直接继承 MyObject.prototype) function isSymbolFromPrototype(obj, symbol) { return !Object.hasOwn(obj, symbol) && (symbol in obj); } console.log(isSymbolFromPrototype(obj, MyObject.prototype.protoSymbol)) // false
关键在于确保在使用 in
操作符时,提供正确的 Symbol 对象,而不是 Symbol 的描述字符串。
性能考虑:hasOwnProperty
vs in
操作符?
通常情况下,hasOwnProperty
和 in
操作符的性能差异可以忽略不计。现代JavaScript引擎对这些操作进行了优化。但是,在极端情况下,如果需要频繁地对同一个对象进行大量属性检查,可以考虑缓存 hasOwnProperty
方法,或者使用 Object.hasOwn
。
const has = Object.prototype.hasOwnProperty; // 缓存 hasOwnProperty function checkProperties(obj, props) { for (let i = 0; i < props.length; i++) { if (has.call(obj, props[i])) { // ... } } }
虽然这种优化在大多数情况下不会带来显著的性能提升,但在特定场景下可能会有所帮助。
今天关于《如何判断对象自身属性?》的内容就介绍到这里了,是不是学起来一目了然!想要了解更多关于JavaScript,原型链,hasOwnProperty,Object.hasOwn,属性判断的内容请关注golang学习网公众号!

- 上一篇
- 园区智变,网络如何赋能企业?

- 下一篇
- LinuxNAT配置与iptables教程详解
-
- 文章 · 前端 | 1分钟前 |
- Node.js事件循环详解与优化技巧
- 479浏览 收藏
-
- 文章 · 前端 | 9分钟前 |
- 浮动与定位区别全解析
- 462浏览 收藏
-
- 文章 · 前端 | 10分钟前 |
- HTML下拉列表怎么创建?select标签教程
- 233浏览 收藏
-
- 文章 · 前端 | 12分钟前 |
- JavaScript异常处理:try...catch详解
- 385浏览 收藏
-
- 文章 · 前端 | 12分钟前 | HTTPS ServiceWorker PWA WebAppManifest 离线缓存
- PWA是什么?网页变App的实现方法
- 459浏览 收藏
-
- 文章 · 前端 | 14分钟前 |
- BOM如何识别设备类型?
- 263浏览 收藏
-
- 文章 · 前端 | 15分钟前 | 深度比较 数组比较 JavaScript数组 字典序比较 相等性判断
- JS数组比较大小技巧全解析
- 459浏览 收藏
-
- 文章 · 前端 | 16分钟前 |
- JavaScript延迟执行技巧:Promise应用详解
- 497浏览 收藏
-
- 文章 · 前端 | 19分钟前 |
- JavaScript对象高效使用技巧
- 363浏览 收藏
-
- 文章 · 前端 | 25分钟前 |
- CSS过渡属性怎么设置?
- 155浏览 收藏
-
- 文章 · 前端 | 27分钟前 |
- JS实现全屏的几种方法
- 106浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 484次学习
-
- 千音漫语
- 千音漫语,北京熠声科技倾力打造的智能声音创作助手,提供AI配音、音视频翻译、语音识别、声音克隆等强大功能,助力有声书制作、视频创作、教育培训等领域,官网:https://qianyin123.com
- 96次使用
-
- MiniWork
- MiniWork是一款智能高效的AI工具平台,专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具,提供精准智能解决方案,让复杂工作简单高效。
- 89次使用
-
- NoCode
- NoCode (nocode.cn)是领先的无代码开发平台,通过拖放、AI对话等简单操作,助您快速创建各类应用、网站与管理系统。无需编程知识,轻松实现个人生活、商业经营、企业管理多场景需求,大幅降低开发门槛,高效低成本。
- 107次使用
-
- 达医智影
- 达医智影,阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”,仅一次CT扫描即可高效识别多种癌症、急症及慢病,为疾病早期发现提供智能、精准的AI影像早筛解决方案。
- 98次使用
-
- 智慧芽Eureka
- 智慧芽Eureka,专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景,通过专家级AI Agent精准执行任务,智能化工作流解放70%生产力,让您专注核心创新。
- 99次使用
-
- 优化用户界面体验的秘密武器:CSS开发项目经验大揭秘
- 2023-11-03 501浏览
-
- 使用微信小程序实现图片轮播特效
- 2023-11-21 501浏览
-
- 解析sessionStorage的存储能力与限制
- 2024-01-11 501浏览
-
- 探索冒泡活动对于团队合作的推动力
- 2024-01-13 501浏览
-
- UI设计中为何选择绝对定位的智慧之道
- 2024-02-03 501浏览