JS判断对象属性是否存在的五种方案分享
本文详细解析JavaScript中判断对象属性存在的五种方案。从基础的in运算符到ES2015的Reflect.has,再到经典的hasOwnProperty及Object.prototype.hasOwnProperty.call,最后介绍ES2022提案中的Object.hasOwn。重点对比各方法在处理原型链属性、对象创建方式及属性名冲突时的行为差异,帮助开发者选择最合适的检测方式。
背景
在Accessible Object.prototype.hasOwnProperty()提案中,提出了一种更简便的方式来验证对象是否包含特定属性。
Object.hasOwn()的主要设计目标是取代Object.prototype.hasOwnProperty()。该提案目前已进入第四阶段,预计于2022年正式纳入标准。
随着Object.hasOwn()的引入,目前我们共有五种方法可以判断对象属性是否存在。
检查属性是否存在
in
JavaScript中的in操作符可用于判断属性是否属于某个对象,也可用于遍历对象的属性。
本文仅讨论in操作符在属性检查方面的应用。
in运算符用于检测对象是否拥有指定名称的属性:
> 'name' in {name: '搞前端的半夏'}
true
> 'name' in {}
false然而,in操作符会同时检测继承自原型链的属性。
> 'toString' in {}
true这是因为空对象{}继承了Object.prototype.toString()方法。
Reflect.has()
Reflect是ES2015新增的内置对象,提供了与JavaScript对象交互的方法。
判断对象是否存在某个属性,其功能与in运算符完全相同。
用法:Reflect.has(obj, propName)
Reflect.has({name:"搞前端的半夏"}, "name"); // true
Reflect.has({name:"搞前端的半夏"}, "age"); // false
Reflect.has({name:"搞前端的半夏"}, "toString"); //truehasOwnProperty
hasOwnProperty方法用于检测对象是否包含特定的自身属性,即判断属性是定义在对象本身而非继承自原型链。
通过对象字面量或构造函数创建的对象,均从Object.prototype继承了hasOwnProperty()方法。
构造函数法
o = new Object();
o.name = '搞前端的半夏';
o.hasOwnProperty('name'); // 返回 true
o.hasOwnProperty('toString'); // 返回 false
o.hasOwnProperty('hasOwnProperty'); // 返回 false对象字面量
o={name:"搞前端的半夏"}
o.hasOwnProperty('name'); // 返回 true
o.hasOwnProperty('toString'); // 返回 false
o.hasOwnProperty('hasOwnProperty'); // 返回 false缺点
不支持create
但在以下情况中:
o = Object.create(null)
o.hasOwnProperty('name'); // 返回 true会直接报错:
Uncaught TypeError: o.hasOwnProperty is not a function
at <anonymous>:1:3覆盖报错
如果对象拥有一个名为'hasOwnProperty'的自有属性,该属性将被覆盖Object.prototype.hasOwnProperty,导致无法通过常规方式访问:
o={hasOwnProperty:"搞前端的半夏"}
o.hasOwnProperty('name'); 直接报错
VM123:3 Uncaught TypeError: o.hasOwnProperty is not a function
at <anonymous>:3:3Object.prototype.hasOwnProperty()
用法:Object.prototype.hasOwnProperty.call(obj, propName),接受两个参数。注意此处使用了call方法以改变this的指向。
Object.prototype.hasOwnProperty()除了支持hasOwnProperty的相同用法,还解决了hasOwnProperty的两个缺点。
o={hasOwnProperty:"搞前端的半夏"}
Object.prototype.hasOwnProperty.call.hasOwnProperty(o,'name'); // 返回falseES13(ES2022)Object.hasOwn()
Object.hasOwn()目前看来旨在替代Object.prototype.hasOwnProperty.call()。
若使用Object.prototype.hasOwnProperty.call()进行封装,代码如下:
function hasOwn(obj, propName) {
return Object.prototype.hasOwnProperty.call(obj, propName);
}Object.hasOwn({name: '搞前端的半夏'}, 'name') // true
Object.hasOwn({}, 'name') //false
Object.hasOwn({}, 'toString') //false
Object.hasOwn(Object.create(null), 'name') //false
Object.hasOwn({hasOwnProperty: 'yes'}, 'name') //false
Object.hasOwn({hasOwn: 'yes'}, 'name') //false总结
至此,关于JS判断对象属性是否存在的五种方案介绍完毕。更多相关JS判断对象属性存在内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
