js 怎么判断对象是否具有某个属性及各方法的区别

目录

[prop in obj](#prop in obj)

obj.hasOwnProperty(prop)

[Object.prototype.hasOwnProperty.call(obj, prop)](#Object.prototype.hasOwnProperty.call(obj, prop))


prop in obj

使用 in 运算符来检查属性是否存在于对象中,包括原型链。

javascript 复制代码
let obj = {
    a: 'name', 
    b: 'sex'
}
Reflect.setPrototypeOf(obj, {c: 'age'})
'a' in obj // true 因为 a 是 obj 的直接属性
'c' in obj // true 存在原型链中
'v' in obj // false
'toString' in obj // true 因为 toString 是 obj 的原型方法
  • 如果对象 obj 或其原型链中包含名为 prop 的属性,则返回 true。

  • 如果对象 obj 不包含名为 prop 的属性,并且它的原型链上也不存在该属性,则返回 false。

  • 只能用在具体的对象上,不能用于 null 或 undefined

    javascript 复制代码
    let obj = null
    obj 
    // null
    'a' in obj
    // 报错 VM6874:1 Uncaught TypeError: Cannot use 'in' operator to search for 'a' in null

obj.hasOwnProperty(prop)

使用 hasOwnProperty 方法来检查对象是否直接拥有指定的属性,不包括原型链。

javascript 复制代码
let obj = {
    a: 'name', 
    b: 'sex'
}
Reflect.setPrototypeOf(obj, {c: 'age'})
obj.hasOwnProperty('a') // true 因为 a 是 obj 的直接属性
obj.hasOwnProperty('c') // false 存在原型链中,不是直接拥有
obj.hasOwnProperty('v') // true
obj.hasOwnProperty('toString') // false 因为 toString 是 obj 的原型方法
  • 如果对象 obj 直接拥有名为 prop 的属性,则返回 true。

  • 如果对象 obj 不直接拥有名为 prop 的属性,或者它的原型链上存在该属性,则返回 false。

  • 只能用在具体的对象上,不能用于 null 或 undefined

    javascript 复制代码
    let obj = null
    obj 
    // null
    obj.hasOwnProperty('a')
    // 报错 Uncaught TypeError: Cannot read properties of null (reading 'hasOwnProperty')

弊端

若被判断的这个对象自身也有一个名为 hasOwnPropery 的属性,这个时候 js 不会将hasOwnPropery 作为关键名进行保护。故而引出 Object.prototype.hasOwnProperty.call(obj, prop)。

Object.prototype.hasOwnProperty.call(obj, prop)

使用 Object.prototype.hasOwnProperty.call(obj, prop) 来检查对象是否直接拥有指定的属性,不包括原型链。

javascript 复制代码
let obj = {
    a: 'name', 
    b: 'sex'
}
Reflect.setPrototypeOf(obj, {c: 'age'})
Object.prototype.hasOwnProperty.call(obj, 'a') // true 
Object.prototype.hasOwnProperty.call(obj, 'c') // false
Object.prototype.hasOwnProperty.call(obj, 'v') // false
  • Object.prototype 上调用 hasOwnProperty 方法,并通过 call 来设置方法内部的 this 指向 obj,然后检查 obj 对象自身属性中是否存在 prop 属性

  • 可用于任何对象,包括 null 和 undefined,但如果对象为 nullundefined,将会抛出错误

    javascript 复制代码
    let obj = null
    obj 
    // null
    Object.prototype.hasOwnProperty.call(obj, 'a') 
    // 报错 Uncaught TypeError: Cannot convert undefined or null to object
    
    Object.prototype.hasOwnProperty.call(obj2, 'a') 
    // 报错 Uncaught ReferenceError: obj2 is not defined
  • 即使 obj 对象本身没有 hasOwnProperty 方法(例如,如果 obj 是通过 Object.create(null) 创建的),你也可以安全地检查 obj 是否有 prop 属性。

    javascript 复制代码
    let obj = Object.create(null)
    obj 
    // {}
    Object.prototype.hasOwnProperty.call(obj, 'a') 
    // false

在实际编程中,若不确定对象是否为 nullundefined,或想要在一些特殊的环境中(比如严格模式下)避免使用 this,应该使用 Object.prototype.hasOwnProperty.call()

相关推荐
Seven凹凸Man1 小时前
WorkBuddy之产品经理原型设计及PRD实战
ai·原型模式
ttod_qzstudio1 天前
【软考设计模式】原型模式:“克隆“对象与深拷贝、浅拷贝精讲
设计模式·原型模式
希冀1235 天前
【JavaScript】Javascript—JS进阶—Day03
开发语言·javascript·原型模式
想吃火锅100524 天前
【前端手撕】instanceof
前端·javascript·原型模式
UXbot24 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
UXbot24 天前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app
UXbot25 天前
原型设计工具如何帮助新人快速进入产品行业?
前端·低代码·ui·交互·团队开发·原型模式·web app
sunny.day1 个月前
js原型与原型链
开发语言·javascript·原型模式·js原型链
UXbot1 个月前
AI网页开发工具能替代工具吗?5大平台对比
前端·人工智能·低代码·ui·原型模式·web app
weixin_307779131 个月前
从“大海捞针”到“主动推理”:AI如何重塑云原生故障诊断的根因链
开发语言·人工智能·算法·自动化·原型模式